javascript - 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您添加的回调 Prop 需要由 form 调用元素本身。您可以通过添加 onSubmit={this.onSubmit} 来完成此操作到 <form />在UsernameForm :

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回调 Prop 导致 onSubmit()您定义的方法将被调用，这又会导致回调传递给 UsernameForm (即您的警报所在的位置)被调用。