Как условно отключить опцию в форме выбора в React JS?

Question

Итак, я пытался дать три набора параметров, которые отображаются из одной и той же таблицы данных, и если один вариант выбран в первом выборе формы, то он должен быть отключен во втором и третьем выборе формы. Три параметра выбора формы отображаются с использованием для l oop, как показано, а метод

my handleChange и окончательный вариант выбора формы отображаются следующим образом:

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

Если вы добавите параметр chosen: false к вашему элементу в состоянии данных, вы можете установить для этого состояния значение data.item[x].chosen = true, когда будет выбран вариант, при этом страница будет перерисована.

при отображении можете написать свой option так:

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