我有一个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});
 }




saveAnswer(event) {
    let currentComponent = this;
    var localAnswer = event.target.value;
    currentComponent.setState({securityAnswer:localAnswer });
}


当我执行该应用程序并滚动或单击选择选项时,我的控制台中从未显示任何内容。在此过程的最后,我用所选值和输入的文本字符串构建一个字符串。为了进行测试,我在输入框中输入“测试字符串”,然后选择了第一个选择选项。我本来希望在生成的字符串中看到值“ 0test字符串”,但会得到“测试字符串”,证明状态变量未通过附加到select的onChange进行更新。

有什么建议?

最佳答案

您选择的代码中有错字:



<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标记上还有一个额外的>。

关于javascript - reactJS <select>不更新状态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55383240/

10-12 01:25
查看更多