这里的目标是每次父选择更改其值时,所有子选择都将其值重置为默认值(空字符串的第一个值)。
import React, {Component} from 'react';
class TestingSelects extends Component {
constructor(props) {
super(props);
this.state = {
selectOneValue: "",
selectTwoValue: "",
selectThreeValue: "",
selectFourValue: ""
}
}
selectOneOnChangeHandler = (ev) => {
this.setState({
selectOneValue: ev.target.value,
selectTwoValue: "",
selectThreeValue: "",
selectFourValue: ""
});
}
selectTwoOnChangeHandler = (ev) => {
this.setState({
...this.state,
selectTwoValue: ev.target.value,
selectThreeValue: "",
selectFourValue: ""
});
}
selectThreeOnChangeHandler = (ev) => {
this.setState({
...this.state,
selectThreeValue: ev.target.value,
selectFourValue: ""
});
}
selectFourChangeHandler = (ev) => {
this.setState({...this.state, selectFourValue: ev.target.value});
}
render(){
return (
<div>
<form>
<div>
<select onChange={ev => this.selectOneOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select1option1">select 1 option 1</option>
<option value="select1option2">select 1 option 2</option>
</select>
</div>
{
this.state.selectOneValue === "select1option1" &&
<div>
<select onChange={ev => this.selectTwoOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select2option1">select 2 option 1</option>
<option value="select2option2">select 2 option 2</option>
<option value="select2option3">select 2 option 3</option>
<option value="select2option4">select 2 option 4</option>
<option value="select2option5">select 2 option 5</option>
<option value="select2option6">select 2 option 6</option>
<option value="select2option7">select 2 option 7</option>
</select>
</div>
}
{
(this.state.selectTwoValue === "select2option1" ||
this.state.selectTwoValue === "select2option2" ||
this.state.selectTwoValue === "select2option5" ||
this.state.selectTwoValue === "select2option7") &&
<div>
<select onChange={ev => this.selectThreeOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select3option1">select 3 option 1</option>
<option value="select3option2same">select 3 option 2</option>
<option value="select3option2same">select 3 option 3</option>
</select>
</div>
}
{
this.state.selectThreeValue === "select3option2same" &&
<div>
<select onChange={ev => this.selectFourOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="allowed">Yes</option>
<option value="denied">No</option>
</select>
</div>
}
</form>
</div>
)
}
}
export default TestingSelects;
编辑:如何重现问题...
- [首次选择]:选择1个选项1
- [第二次选择]:选择2个选项1
- [第三选择]:选择3个选项1
- [第二选择]:选择2个选项2
Here is where the 3rd select should reset to "Please Select an Option"
有人知道怎么做吗?
最佳答案
只要将状态绑定(bind)到value
,一切都应该有效。每个 Prop <select>
元素。您的代码不起作用的原因是您没有绑定(bind) value
每个选择到组件的状态。
例如,这是您应该做的:
<select onChange={ev => this.selectOneOnChangeHandler(ev)} value={this.state.selectOneValue}>
关于javascript - 根据一项选择重置其他选择 (ReactJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61215752/