猿问

reactJS <select>不更新状态

我有一个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进行更新。


有什么建议?


回首忆惘然
浏览 373回答 3
3回答

慕桂英4014372

您选择的代码中有错字:<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。

慕桂英546537

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

白衣染霜花

将函数绑定到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});}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答