根据反应中的另一个选择框的值,动态加载选择框的选项 [英] load options of a select box dynamically based on value of another select box in react
问题描述
我尝试创建2个选择框,其中第一个选择框的选项是固定的,但第二个选择框会根据第一个div的选定值进行更改。
例如,例如:
第一次选择:
< select>
< option>整数< / option>
< option> Alphabets< / option>
< / select>
然后如果在第一选择中选择了整数,那么我需要整数1到10作为第二选择中的选项框。但是如果选择了Alphabets,a到z应该在第二个选择框的选项中。
您可以创建一个查找表对象,其中包含整数和字母,每个都有一个相关的键。
然后在一个中选择
,使用选定的更新状态。键
,在另一个中选择
,使选项对应于选定的键
。
这是一个正在运行的示例:
const lookup = {int:[{id:'1',text:'1'},{id:'2',text:'2'},{id:'3',text:' 3'},{id:'4',text:'4'},{id:'5',text:'5'}],abc:[{id:'a',text:'a' },{id:'b',text:'b'},{id:'c',text:'c'},{id:'d',text:'d'},{id:'e' ,text:'e'}]} App类扩展React.Component {构造函数(道具){super(道具); this.state = {dataValue:'int'}} onChange =({target:{value}})=> {this.setState({dataValue:value}); } render(){const {dataValue} = this.state; const options = lookup [dataValue]; < div>< select onChange = {this.onChange}>< option value =int> Integers< / option>< option value =abc> Alphabets< / option>< / select>>< hr />< select> {options.map(o =>< option key = {o.id} value = {o.id}> {o.text}< / option> ;)}< / select>< / div>); }} ReactDOM.render(< App /> ;, document.getElementById('root'));
< script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js>< / script> < script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js>< / script>< div id =root> ;< / div>
I m trying to create 2 select boxes in which options of 1st select box are fixed but the second ones change based on the selected value of first div.
eg: 1st Select:
<select>
<option>Integers</option>
<option>Alphabets</option>
</select>
Then if Integers is selected in 1st select then I want integers 1 to 10 as options in the 2nd select box. But if Alphabets is selected the a to z should come in options of the second select box.
You can create a lookup table object that holds both integers and Alphabets with each has a relevant key.
Then in one select
you update the state with selected key
and in the other select
you render the options correspond to the selected key
.
Here is a running example:
const lookup = {
"int": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"abc": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dataValue: 'int'
}
}
onChange = ({ target: { value } }) => {
this.setState({ dataValue: value });
}
render() {
const { dataValue } = this.state;
const options = lookup[dataValue];
return (
<div>
<select onChange={this.onChange}>
<option value="int">Integers</option>
<option value="abc">Alphabets</option>
</select>
<hr />
<select>
{options.map(o => <option key={o.id} value={o.id}>{o.text}</option>)}
</select>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
这篇关于根据反应中的另一个选择框的值,动态加载选择框的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!