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

和

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

当我执行应用程序并滚动或单击选择选项时，我的控制台中从未显示任何内容。在我的过程结束时，我用选定的值和输入的文本字符串构建一个字符串。为了测试，我在输入框中输入“测试字符串”并选择了第一个选择选项。我本来希望在结果字符串中看到值“0test string”，但我得到“test string”证明状态变量没有通过附加到 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});
}