时间戳

首页 > 解决方案 > ReactJS event.preventDefault(); 不是函数

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

问题描述

我试图提交表单数据，我的主要要求是整个页面不应该在表单提交时重新加载。因此我尝试添加 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>

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

标签： javascriptreactjs

解决方案

您将this对象传递给函数而不是event. 你必须通过event：

<form onSubmit={ (event) => this.handleSubmit(event, type, id) } target="#">

或：使用.bind()

<form onSubmit={ this.handleSubmit.bind(this, type, id) } target="#">

推荐阅读