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)}>&nbsp; &nbsp; <option value="0">What is you mother's maiden name?</option>&nbsp; &nbsp; <option value="1">What elementary school did you attend?</option>&nbsp; &nbsp; <option value="2">What was the name of your first pet?</option>&nbsp; &nbsp; <option value="3">What city were you born in?</option></select>应该：<select className="text_15" value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}>&nbsp; &nbsp; <option value="0">What is you mother's maiden name?</option>&nbsp; &nbsp; <option value="1">What elementary school did you attend?</option>&nbsp; &nbsp; <option value="2">What was the name of your first pet?</option>&nbsp; &nbsp; <option value="3">What city were you born in?</option></select>您的标签上还有一个额外的>select。

Answer 2

您设置状态的方式将丢失您以前的状态信息。currentComponent.setState({&nbsp;...this.state,securityAnswer:localAnswer&nbsp;});这...this.state就是所谓的价差，它将保留您不想更改的状态元素。

Answer 3

将函数绑定到this，或使用箭头函数语法：saveQuestion = (event) => {&nbsp; &nbsp;&nbsp;&nbsp; let currentComponent = this;&nbsp;&nbsp;&nbsp; var localQuestion = event.target.value;&nbsp; console.log("localQuestion: ", localQuestion);&nbsp; this.setState({securityQuestion: localQuestion});}