Question

一般来说，我是React和JS的新手，我正在跟踪关于react on的速成班，在课程的某个时候被卡在这个错误上当我打开http://localhost:3000/时，即使在控制台中显示“已成功编译”，我也在chrome上收到此错误。我在网站上浏览了其他主题，但没有一个回答

这是2个相关文件

AddTodo.js

export class AddTodo extends Component {  
    onSubmit = (e) => {
      e.preventDefault();
      this.props.addTodo(this.state.title);
      this.setState({ title: '' });
    }
  render() {
    return (
      <form  style = {{display:'flex'}} onSubmit={this.onSubmit()} >
          <input type="text" name='title' style = {{flex:'10' , padding:'5px'}} placeHolder="Ajouter une Tâche..." value={this.state.value} onChange={this.onChange}/> 
          <input type = "submit" value="Ajouter" className="btn" style = {{flex:'1'}} />
      </form>
    )}

App.js

addTodo = (title) => {const newTodo = {id : 5,title,completed : false,}
render() {
return (
  <div className="App">
    <div className="container">
      <Header />
      <AddTodo addTodo ={this.addTodo}/>
      <Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} />
    </div>
  </div>
);

}

Answer 1

在 onSubmit 上分配功能时遇到问题：

 <form  style = {{display:'flex'}} onSubmit={this.onSubmit} >

根据您的代码onSubmit={this.onSubmit()}，它不会分配代码，而是使用呈现器本身而不是在提交时执行代码。

Answer 2

您正在立即执行功能：

onSubmit={this.onSubmit()}

这意味着两件事：

没有事件参数传递给它，因此是错误。
该函数的 result 被用作提交处理程序，它也是undefined。

不执行功能，只需在提交表单时将功能本身作为参考，供系统稍后执行：

onSubmit={this.onSubmit}

Answer 3

将onSubmit={this.onSubmit()}替换为onSubmit={this.onSubmit}，否则您将无法访问e参数。

<form  style = {{display:'flex'}} onSubmit={this.onSubmit} >
   <input type="text" name='title' style = {{flex:'10' , padding:'5px'}} placeHolder="Ajouter une Tâche..." value={this.state.value} onChange={this.onChange}/> 
   <input type = "submit" value="Ajouter" className="btn" style = {{flex:'1'}} />        
</form>

反应js

3 个答案: