javascript - React.js 期望 onSubmit 监听器是一个函数，而不是 bool 类型

Question

有人可以告诉我我到底做错了什么吗？我对 React 还很陌生，我读过的所有内容都表明这应该可行。我试图在提交表单时调用函数“addItem”，但是 console.log 在页面加载时抛出错误“预期 onSubmit 监听器是一个函数，而不是 bool 类型”。谢谢!

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
    e.preventDefault()
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit">Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;

Answer 1

尝试将您的 render 和 addItem 更改为如下所示:

  addItem(e){
    e.preventDefault();
    {/* add the rest of the function here */}
  }
  render(){
    return(
      <div className="box-wrapper">
        <form onSubmit={this.addItem.bind(this)}>
          <input
            href={(a) => this._inputElement = a}
            placeholder={this.props.placeHolder}
            type="text"
          />
          <button type="submit" onClick={this.addItem.bind(this)}>Submit</button>
        </form>
        <List entries={this.state.items} />
      </div>
  )

}

我做了两个重要的改变:

1. 在 addItem 方法中添加了 e.preventDefault();，这将阻止默认行为。

2. 向“提交”按钮添加了 onClick 处理程序，并将 addItem 方法作为目标可执行文件传入。