如何有条件地禁用 React JS 中表单选择中的选项？

Question

所以我一直在尝试给出从同一个数据表中呈现的三组选项，如果在第一个表单选择中选择了一个选项，那么在第二个和第三个表单选择中应该禁用它。 三个表单选择选项使用如图所示的 for 循环呈现，

我的 handleChange 方法和最终呈现的 Form Select 是这样写的：

handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
    for (var i = 0; i < this.state.data.length; i++) {
        if (this.state.data[i].securityQuestion === e.target.value) {
            if (e.target.name === "questionOne") {
                this.setState({
                    questionOneId: this.state.data[i].securityQuestionId
                })
            } else if (e.target.name === "questionTwo") {
                    alert(i)
                this.setState({
                    questionTwoId: this.state.data[i].securityQuestionId
                })
            }
        } else {
            this.setState({
                questionThreeId: this.state.data[i].securityQuestionId
            })
        }
    }
}

<FormGroup>
    <FormSelect onChange={this.handleChange} name="questionOne" value={this.state.questionOne}>
        {this.state.data && this.state.data.map((item, index) =>

            <option key={item.securityQuestionId}>{item.securityQuestion}</option>)
        }
    </FormSelect>
</FormGroup>
<FormGroup>
    <FormInput id="feInputAddress8"
        name="answerOne"
        value={this.state.answerOne}
        invalid={this.state.answerOne === ""}
        valid={this.state.answerOne !== undefined}
        onChange={this.handleChange}
        placeholder="Answer.." />
    <FormFeedback> Answer is mandatory.</FormFeedback>
</FormGroup>

<FormGroup>
    <FormSelect onChange={this.handleChange} name="questionTwo" value={this.state.questionTwo} >
        {this.state.data && this.state.data.map((item, index) =>
            <option key={item.securityQuestionId} onClick={() => this.getQuestionData(item.securityQuestionId, item.securityQuestion)}>{item.securityQuestion}</option>)
        }
    </FormSelect>
</FormGroup>
<FormGroup>
    <FormInput id="feInputAddress8"
        name="answerTwo"
        value={this.state.answerTwo}
        invalid={this.state.answerTwo === ""}
        valid={this.state.answerTwo !== undefined}
        onChange={this.handleChange}
        placeholder="Answer.." />
    <FormFeedback> Answer is mandatory.</FormFeedback>
</FormGroup>

<FormGroup>
    <FormSelect onChange={this.handleChange} name="questionThree" value={this.state.questionThree}>
        {this.state.data && this.state.data.map((item, index) =>
            <option key={item.securityQuestionId}>
                {item.securityQuestion}
            </option>)
        }
    </FormSelect>
</FormGroup>

<FormGroup>
    <FormInput id="feInputAddress8"
        name="answerThree"
        value={this.state.answerThree}
        invalid={this.state.answerThree === ""}
        valid={this.state.answerThree !== undefined}
        onChange={this.handleChange}
        placeholder="Answer.." />
    <FormFeedback> Answer is mandatory.</FormFeedback>
</FormGroup>

Answer 1

如果在数据状态中向项目添加data.item[x].chosen = true chosen: false参数，则可以在选择选项时将状态设置为data.item[x].chosen = true ，这将重新呈现页面。

在渲染中，您可以像这样编写您的option ：

<option key={...} onClick={...} disabled={item.chosen} >{...}</option>