根据反应中另一个选择框的值动态加载选择框的选项答案

【问题标题】：load options of a select box dynamically based on value of another select box in react根据反应中另一个选择框的值动态加载选择框的选项
【发布时间】：2018-01-03 11:47:32
【问题描述】：

我正在尝试创建 2 个选择框，其中第一个选择框的选项是固定的，但第二个选择框会根据第一个 div 的选定值而变化。

例如：第一个选择：

<select>
    <option>Integers</option>
    <option>Alphabets</option>
</select>

然后，如果在第一个选择中选择了整数，那么我希望整数 1 到 10 作为第二个选择框中的选项。但是如果选择了 Alphabets，则 a 到 z 应该出现在第二个选择框的选项中。

【问题讨论】：

标签： html reactjs

【解决方案1】：

您可以创建一个查找表对象，该对象同时包含整数和字母，每个都有一个相关的键。
然后在一个select 中使用选定的key 更新状态，在另一个select 中呈现与选定key 对应的选项。

这是一个运行示例：

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>

【讨论】：

但我有一个复杂的结构和第一个选择框中的 20 多个选项。我怎样才能创建句柄
您没有发布您的结构，我发布的示例是由于您在问题中提供的示例。但实际上你的结构有多复杂并不重要，你总是可以对其进行规范化并在.map中操作它
这和我说的一样。这是我只是认为查找表很难创建的要求。刚才我写了一个for循环来动态创建查找表，它可以工作。谢谢你的主意。真的很感激。
没问题，很高兴它对您有所帮助。如果您认为答案提供了您的解决方案，请接受并将其标记为已回答。 :)
你可以初始化它（就像我在状态中所做的那样）或者如果它没有初始化就不要运行.map：dataValue && data[dataValue].map(o => {//...})

【解决方案2】：

希望对你有帮助

<!DOCTYPE html>
<html>
<body>   

<select id="sel" onchange="ChangeList()"> 
  <option value="">select</option> 
  <option value="I">Integer</option> 
  <option value="A">Alphabet</option> 
</select> 

<select id="type"></select> 

<script>
var IntandAlph = {};
IntandAlph['I'] = ['1', '2', '3','4','5','6','7','8','9','10'];
IntandAlph['A'] = ['A', 'B', 'C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

function ChangeList() {
    var selList = document.getElementById("sel");
    var typeList = document.getElementById("type");
    var seltype = selList.options[selList.selectedIndex].value;
    while (typeList.options.length) {
        typeList.remove(0);
    }
    var Num = IntandAlph[seltype];
    if (Num) {
        var i;
        for (i = 0; i < Num.length; i++) {
            var sel = new Option(Num[i], i);
            typeList.options.add(sel);
        }
    }
} 
</script>

</body>
</html>

【讨论】：