时间戳

首页 > 解决方案 > setState 不会改变 React 中的状态

reactjs - setState 不会改变 React 中的状态

问题描述

所以，我有一个返回表单的函数

return (
<div className="App">
  <header className="nav-container">
    <nav className="my-nav">
      <a href="/">
        <h1 className="brand-name">Admin Panel</h1>
      </a>
       <CgProfile id="pp" size={50}/>
    </nav>
  </header>

  <main className="main-body">
  <div id = "message"></div>
   <div className="form-container">
    <form>
    <select name = "genre" value = {this.state.value} onChange={this.handleChange}>
      <option value = ''>Select a Genre</option>
      <option value = "gk">General Knowledge</option>
      <option value = "gScience">General Science</option>
      <option value = "entertainment">Entertainment</option>
      <option value = "sports">Sports</option>
      <option value = "Politics">Maths</option>
      <option value = "geography">Geography</option>
    </select>

      <input type="text" placeholder="Enter Question" spellCheck="true" name="question" value={this.state.value} onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 1" spellCheck="true" name="option1" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 2" spellCheck="true" name="option2" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 3" spellCheck="true" name="option3" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 4" spellCheck="true" name="option4" value={this.state.value}  onChange={this.handleChange}></input>
      
      <button type="button" onClick={this.handleSubmit}>Add</button>
    </form>
    </div>
  </main>
</div>
);

Add单击按钮时，表单被提交，但是当我使用该方法setState清除表单输入字段时，表单字段没有被清除。

我的handleSubmit功能是：

    handleSubmit = (e)=>{
      e.preventDefault();
      if(this.state.question === '' || this.state.option1 === '' || this.state.option2 === '' || this.state.option3 === '' || this.state.option4 === '' || this.state.genre === '' ){
      var errorMessage = React.createElement('p',{className : "err"},"All fields are required");
     }
    else{
    let queObj = {
      question : this.state.question,
      option : {
        1 : this.state.option1,
        2 : this.state.option2,
        3 : this.state.option3,
        4 : this.state.option4
      },
      genre : this.state.genre,
      submittedBy : "Abhilekh Gautam",
      Date : new Date().toDateString()

    }
   que.push(queObj);
   this.setState({
     question:'',
     option1:'',
     option2:'',
     option3:'',
     option4:'',
     genre:''
   },()=>{
     console.log('SetState called')
     console.log(this.state.question.value)
 })

 var sucessMessage = React.createElement('p',{className : "sucess"},"Question Submitted Sucessfully");


  }

  if(errorMessage)
     ReactDOM.render(errorMessage,document.getElementById('message'))
  
  else if(sucessMessage)
     ReactDOM.render(sucessMessage,document.getElementById('message'));
}

编辑：1 我的handleChange功能是

handleChange = (e) =>{
  e.preventDefault();
   this.setState(
     {
       [e.target.name]: e.target.value
    }
   )
}

标签： reactjs

解决方案

因为您没有将输入的值设置为您在提交时重置的值，所以输入的值不会改变。只需value将输入更新为确切状态：

<input type="text" placeholder="Option 1" spellCheck="true" name="option1" value={this.state.option1}  onChange={this.handleChange}></input>

推荐阅读