Я пытаюсь создать серию вопросов безопасности.У меня есть пул доступных вопросов.На моей веб-странице будет три таких выпадающих списка.Q1, Q2, Q3.Я могу построить это совершенно правильно.Использование «отреагировать».
Однако проблема в том, что я выбираю один вопрос в первом квартале.Я хочу, чтобы этот вопрос не был доступен в раскрывающемся списке для Q2.Однако каждый раз он появляется один и тот же набор.Как я могу удалить уже выбранные вопросы из списка .?
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;
Я следовал за кодом в https://github.com/JedWatson/react-select