根据反应中的另一个选择框的值，动态加载选择框的选项 [英] 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屋！