ReactJS:表单onSubmit未能调用回调

Question

下面是一个关于YouTube的聊天教程，如下所示：

https://www.youtube.com/watch?v=6vcIW0CO07k

在3-4分钟的时间内，本教程开始添加onChange和onSubmit事件处理程序。

此时，我应该能够单击按钮，并打开一个带有输入值的警报窗口。

下面是UsernameForm.js文件的内容：

import React from 'react'

class UsernameForm extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        username: ''
    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
}

onChange(e) {
    this.setState({
        username: e.target.value,
    })
}

onSubmit(e) {
    e.preventDefault()
    this.props.onSubmit(this.state.username)
}

render () {
    return <div>
        <form>
            <input 
                type="text" 
                placeholder="What is your username?" 
                onChange={this.onChange} 
            />
            <input type="submit" />
        </form>
    </div>
  }
}

export default UsernameForm;

在Apps.js文件中：

import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'

class App extends Component {
  render() {
    return <UsernameForm onSubmit={username => alert(username)} />
  }
}

export default App

编译是成功的，但没有警报窗口。这一页刚刚刷新。

有人知道为什么警报窗口没有开火吗？

Answer 1

您添加的onSubmit回调支柱需要由form元素本身调用。您可以通过将onSubmit={this.onSubmit}添加到UsernameForm中的<form />中来实现这一点。

render () {
    return <div>
        {/* form has onSubmit callback prop which is invoked when the
        form itself is submit. Wire your components onSubmit (ie 
        this.onSubmit) to the form's callback to solve the problem */}
        <form onSubmit={this.onSubmit}> 
            <input 
                type="text" 
                placeholder="What is your username?" 
                onChange={this.onChange} 
            />
            <input type="submit" />
        </form>
    </div>
  }
}

将this.onSubmit传递给表单的onSubmit回调支柱会导致调用您定义的onSubmit()方法，这反过来又会导致调用传递给UsernameForm (也就是您的警报所在)的回调。