reactJS <select>不更新状态

Question

我有一个reactJS应用程序，在其中提示用户输入一些信息。这是要求用户从对象中选择一个选项并在输入框中输入文本字符串的代码：

    

        

            选择以下问题之一回答         

    

    

        

            

值= {currentComponent.state.securityQuestion} onChange = {（事件）=> this.saveQuestion（事件）}>                 你母亲的娘家姓是什么？                 您上过哪所小学？                 您的第一个宠物的名字是什么？                 您出生在哪个城市？                      

Answer 1

您选择的代码中有错字：

<select className="text_15"> value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}>
    <option value="0">What is you mother's maiden name?</option>
    <option value="1">What elementary school did you attend?</option>
    <option value="2">What was the name of your first pet?</option>
    <option value="3">What city were you born in?</option>
</select>

应该是：

<select className="text_15" value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}>
    <option value="0">What is you mother's maiden name?</option>
    <option value="1">What elementary school did you attend?</option>
    <option value="2">What was the name of your first pet?</option>
    <option value="3">What city were you born in?</option>
</select>

您的select标签上还有一个> 。

Answer 2

您设置状态的方式正在丢失您以前的状态信息。

currentComponent.setState({ ...this.state,securityAnswer:localAnswer });

...this.state被称为扩展，将保留您不想更改的状态元素。

Answer 3

将函数绑定到this，或使用箭头函数语法：

saveQuestion = (event) => {    
  let currentComponent = this;  
  var localQuestion = event.target.value;
  console.log("localQuestion: ", localQuestion);
  this.setState({securityQuestion: localQuestion});
}