我正在尝试提出一系列安全问题。我有很多问题。我的网页中将有三个这样的问题下拉列表。 Q1，Q2，Q3。 我能够很正确地构建它。使用反应选择。
但是，问题是当我在第一季度中选择一个问题时。我希望该问题在第二季度的下拉列表中不可用。但是，每次出现都相同。如何从列表中删除已经选择的问题？？
class dropdownqs extends React.Component {
constructor() {
super();
this.state = {
options : [
{ value: ‘What was your childhood nickname?’, label: ‘What was your childhood nickname?’ },
{ value: ‘In what city did you meet your spouse/significant other?’, label: ‘In what city did you meet your spouse/significant other?’},
{ value: ‘What is the name of your favorite childhood friend?’, label: ‘What is the name of your favorite childhood friend?’},
{ value: ‘What street did you live on in third grade?’, label: ‘What street did you live on in third grade?’},
{ value: ‘What is the middle name of your youngest child?’, label: ‘What is the middle name of your youngest child?’ },
{ value: ‘What is the middle name of your oldest sibling?’, label: ‘What is the middle name of your oldest sibling?’},
{ value: ‘What school did you attend for sixth grade?’, label: ‘What school did you attend for sixth grade’ },
{ value: ‘What was the name of your first stuffed animal?’, label: ‘What was the name of your first stuffed animal?’ },
{ value: ‘In what city or town did your mather and father meet?’, label: ‘In what city or town did your mather and father meet?’ }
]
}
this.handleChangeqs1 = this.handleChangeqs1.bind(this);
this.handleChangeqs2 = this.handleChangeqs2.bind(this);
this.handleChangeqs3 = this.handleChangeqs3.bind(this);
// function
handleChangeqs1(selectedOption){
// this.setState({ selectedOption});
this.setState({ selectedOptionqs1: selectedOption });
var i;
var array = this.state.options;
for(i = 0; i < array.length; i++){
if(array[i].value==selectedOption.value){
array.splice(i,1)
this.setState({
options: array
})
break;
}
}
}
// function
handleChangeqs2(selectedOption) {
//this.setState({ selectedOption});
this.setState({ selectedOptionqs2:selectedOption });
var i;
var array = this.state.options;
for(i = 0; i < array.length; i++){
if(array[i].value==selectedOption.value){
array.splice(i,1)
this.setState({
options: array
})
break;
}
}
}
// function
handleChangeqs3(selectedOption) {
//this.setState({ selectedOption});
this.setState({ selectedOptionqs3 : selectedOption });
var i;
var array = this.state.options;
for(i = 0; i < array.length; i++){
if(array[i].value==selectedOption.value){
array.splice(i,1)
this.setState({
options: array
})
break;
}
}
}
render() {
const { selectedOption } = this.state;
return (
<div className=“App”>
{/* BODY */}
<body className=“App-body-register”>
{/* SECURITY QUESTIONS */}
<div align=“left”>
{/* 1st Security Question */}
<h3>
Security question 1
</h3>
{/* //select question */}
<Select
id=“Question1select”
editable={false}
value={selectedOption}
onChange={this.handleChangeqs1.bind(this)}
options={this.state.options}
/>
{/* //input answer */}
<input type=“text” className=“App-login-input” id=“security1ans” minlength=“4" maxlength=“20”
placeholder=“Must be a minimum of 4 characters long” required/>
<span class=“validity”></span>
{/* // 2nd Security Question */}
<h3>
Security question 2
</h3>
{/* //select question */}
<Select
value={selectedOption}
onChange={this.handleChangeqs2.bind(this)}
options={this.state.options}
/>
{/* //input answer */}
<input type=“text” className=“App-login-input” id=“security2ans” minlength=“4” maxlength=“20"
placeholder=“Must be a minimum of 4 characters long” required/>
<span class=“validity”></span>
{/* // 3rd Security Question */}
<h3>
Security question 3
</h3>
{/* //select question */}
<Select
value={selectedOption}
onChange={this.handleChangeqs3.bind(this)}
options={this.state.options}
/>
{/* //input answer */}
<input type=“text” className=“App-login-input” id=“security3ans” minlength=“4" maxlength=“20”
placeholder=“Must be a minimum of 4 characters long” required/>
<span class=“validity”></span>
</div>
</body>
</div>
);
}
export default dropdownqs;
答案 0 :(得分：1)
要有3个输入select，每个输入都不能选择其他select所选择的选项，则需要在现有状态中添加一个新属性来开始所有已经选择的问题。
一旦我们知道所有select已经选择的选项，我们就可以从所有可能的问题开始，然后通过filter函数过滤掉那些已经选择的问题：
getAvailableOptions = () => {
const availableOptionsLeft = this.state.filterOptions;
return availableOptionsLeft.filter(questionOption => {
return this.state.questionVals.indexOf(questionOption) === -1;
});
};