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

Question

So I have been trying to give three sets of options that are rendered from the same data table, and if one option is selected in the first form select, then it should be disabled in the second and third form select. The three form select options are rendered using a for loop as shown and the

my handleChange method and the final rendered Form Select is written like so:

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

if you add a chosen: false param to your item in your data state you can then set the state to data.item[x].chosen = true when an option is chosen, this will rerender the page.

in the render you can write your option like this:

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