javascript - ReactJS event.preventDefault();不是一个函数

Question

我试图提交表单数据，我的主要要求是整个页面不应在表单提交时重新加载。因此我尝试添加 event.preventDefault();在我的表单提交函数中，但它给了我一个错误。

我尝试了其他各种 stackoverflow 答案中提到的各种解决方案，但没有一个起作用。

constructor(props){
    super(props);
    this.state = {
        rating:5,
        review:"",
        user:""
    }
    this.handleSubmit = this.handleSubmit.bind(this);
}

async handleChange(event) {
    const name = event.target.name;
    //console.log(name);
    this.setState({ [name]: event.target.value})
    //console.log(this.state);
  }

  handleSubmit(event,type,id) {
    const data = new FormData(event.target);
    alert(event);
    console.log("event",event);
    event.preventDefault();
    data.append("type",type)
    fetch('http://localhost:10000/movie/addreview/'+id, {
      method: 'POST',
      body: data,
    });
  }

下面是我的表格

<form onSubmit={this.handleSubmit(this,type,id)} target="#">
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Username </h1> 
                    <input name="user"  onChange={this.handleChange.bind(this)} value={this.state.user} className="input" size="10"></input> 
                     </div>

                     <br/>
                <br/>
                <div className="ratingfield">
                    <h1 className="ratingtext">Enter Rating from 1-10</h1> 
                    <input name="rating"  onChange={this.handleChange.bind(this)} value={this.state.rating} className="input" size="4"></input> 
                     </div>

                <br/>
                <br/>

                <center><h1 className="new"> Enter Review</h1></center>
                <center><textarea name="review" onChange={this.handleChange.bind(this)} className="message" rows="10" cols="50"></textarea></center>
                <center><input type="submit" className="sbtbtn"></input></center>
  </form>

任何解决方案都会非常有帮助。

Answer 1

您可能应该阅读有关事件处理程序的更多信息 here

您在渲染阶段调用处理程序，而不是作为callback传递给事件，并且由于您的处理程序不返回任何内容，因此该事件将不会收到任何内容。

试试这个

handleSubmit(type, id, event){
  // insert your logic here
}

render() {
  return ( 
     <form onSubmit={this.handleSubmit.bind(this,type,id)} target="#">
       /* JSX goes here */
     </form>
)}

bind 函数将参数和范围绑定(bind)到您的回调(处理程序handleSubmit)。

传递给 bind 函数的参数将位于 React 内部传递给处理程序的参数之前

this 指的是函数被调用后的作用域。这允许您调用 this.setState 因为 this 是由组件类绑定(bind)的