reactJS <select>不更新状态

Question

我有一个reactJS应用程序，在这里我提示用户进行一些输入。这是要求用户从<select>对象中选择一个选项并在输入框中输入文本字符串的代码：<div className="container">    <div className="row">        <div className="col-12 test-left text_15">            <label>Select one of the following questions to answer</label>        </div>    </div>    <div className="row">        <div className="col-12 text_15">            <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>        </div>    </div></div><div className="spacerAfterButton"></div> <div className="container">    <div className="row">        <div className="col-12 text-left text_15">            <label>Provide the answer to the question you selected</label>        </div>    </div>    <div className="row">        <div className="col-12 text-center">            <input type="text" maxLength="20" className={localData.cssAnswer} onChange={(event) => this.saveAnswer(event)}/>             </div>    </div></div>我的状态如下所示：    this.state = {         passData: this.props.location.state,        planID: "",        memberID: "",        PIN: "",        userID: "",        password: "",        securityQuestion: "",        securityAnswer: "",        eMail: ""     }我也有以下内容：saveQuestion(event) {        let currentComponent = this;      var localQuestion = event.target.value;    console.log("localQuestion: ", localQuestion);    currentComponent.setState({securityQuestion: localQuestion}); }当我执行该应用程序并滚动或单击选择选项时，我的控制台永远都不会显示任何内容。在此过程的结尾，我将使用所选值和输入的文本字符串构建一个字符串。为了进行测试，我在输入框中输入“测试字符串”，然后选择了第一个选择选项。我本来希望在生成的字符串中看到值“ 0test字符串”，但是却得到“测试字符串”，证明状态变量没有通过附加到select的onChange进行更新。有什么建议？

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

}