如何在反应中创建级联下拉列表答案

【问题标题】：how to create cascading dropdown lists in react如何在反应中创建级联下拉列表
【发布时间】：2019-01-08 17:52:33
【问题描述】：

如果可以使用 office-ui-fabric-react，有人可以告诉我如何创建三个级联下拉列表吗？

另一个问题，当第一个下拉列表中的值更改时，如何重置第二个列表中的索引以显示第一个项目为选中状态？

【问题讨论】：

是的，这是可能的，您只需根据您在onChanged 获得的值更改options 其他下拉列表。要选择第一个项目，只需在第一个下拉列表调用onChanged 时将selectedKey 设置为第一个项目。
我可以在三个组件上使用相同的“onchanged”事件处理程序吗？如何检测哪个组件触发了该事件？就像此刻他们三个同时开火一样。我对三个不同的数据选项使用相同的组件。
onChanged 可以在每个组件上。为简单起见，您可以为每种方法附加 3 种不同的方法，以确保它们不同。如果不查看您的代码，我不确定这三个是如何同时触发的。
感谢您的回复。当我对所有三个事件使用一个事件处理程序时，它们会同时触发。当我使用三个单独的时，我必须实际检查。我认为会有像.net这样的方式。

【解决方案1】：

如this post 中所述，这是我实现下拉组件动态选择的一种可能方式。您可以通过将组件本身作为另一个下拉列表的子级传递来递归地使用DropDown 组件；

const SomeComponent = () => 'SomeComponent';
const Foo = () => 'Foo';
const Bar = () => 'Bar';

class ListItem extends React.Component {
  handleClick = () => {
    const { option: {id}, onClick } = this.props;
    onClick(id);
  }
  
  render(){
    const { option: { label } } = this.props;
    return (
      <li onClick={this.handleClick}>{label}</li>
    )
  }
}

class DropDown extends React.Component {
  state = {
    selectedOption: null
  }
  
  handleOptionClick = optionId => {
    const { options } = this.props;
    this.setState({ selectedOption: options.find(option => option.id === optionId).child });
  }
  
  render(){
    const { selectedOption } = this.state;
    const { options } = this.props;
    return (
      <ul>
        {options.map(option => (
          <ListItem
            option={option}
            onClick={this.handleOptionClick}
          />
        ))}
        {selectedOption}
       </ul>
     )
  }
}

const DropDownOptions = [
  {id: '1', label: 'label-1', child: <SomeComponent />},
  {id: '2', label: 'label-2', child: <DropDown options={[
    {id: '2-1', label: 'label-2-1', child: <Foo />},
    {id: '2-2', label: 'label-2-2', child: <Bar />}
  ]} />}
]

ReactDOM.render(<DropDown options={DropDownOptions} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：