Question

有人可以告诉我，我在这里做错了什么？我对React很新，我读过的所有内容都说这应该有用。我正在尝试在提交表单时调用函数“addItem”，但是console.log在页面加载时抛出错误“预期onSubmit监听器是一个函数，而不是类型为boolean”。谢谢！

af.getAuth()

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>
  )

}

我做了两个重要的改变：

将e.preventDefault();添加到addItem方法，这将阻止默认行为。
在“提交”按钮中添加了onClick处理程序，并将addItem方法作为目标可执行文件传入。

Answer 2

首先必须删除event.preventDefault。它限制了网页的默认行为。将一个onClick事件监听器添加到提交，以便在按钮单击时执行该功能。

`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(); remove this prevent default
  }
  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" onClick={this.addItem.bind(this)}>Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;`

Answer 3

我没有收到任何错误。但是您应该将ActivityCompat.requestPermissions放在preventDefault的顶部，这样可以防止页面重新加载。通过将addItem属性分配给输入并通过ref进行访问，可以更好地处理输入值。

this.refs.refName

React.js预期onSubmit监听器是一个函数，而是得到类型boolean

3 个答案: