动态下拉框示例。HowTo？

Question

有人能指出我的方向任何动态反应下拉框的例子吗？

我希望实现下拉功能，它将接受主下拉选择的结果，以确定二级下拉列表的输出。例如，从主下拉列表中选择“London”，将在伦敦内填充一个带有区域(区)的二级下拉框。

我计划通过从firebasedb中选择数据来填充下拉框。

Answer 1

您可以从您的道具或状态中动态地响应复选框的选项列表。为示例运行下面的代码片段，说明该示例的外观。

还可以查看react中的 elements。

​

class MyForm extends React.Component {
  constructor(props) {
    super(props)
    
    this.handleFirstLevelChange = this.handleFirstLevelChange.bind(this)
    this.handleSecondLevelChange = this.handleSecondLevelChange.bind(this)
    
    // Prepopulate with the first item for each level
    this.state = {
      firstLevel: Object.keys(props.options)[0],
      secondLevel: Object.keys(props.options)[0][0]
    }
  }
  
  handleFirstLevelChange(event) {
    this.setState({firstLevel: event.target.value});
  }
  
  handleSecondLevelChange(event) {
    this.setState({secondLevel: event.target.value});
  }
  
  render() {
    const renderOption = item => <option value={item}>{item}</option>

    const firstLevelOptions = Object.keys(this.props.options).map(renderOption)
    const secondLevelOptions = this.props.options[this.state.firstLevel].map(renderOption)
    
    return (
      <div>
        <p>
          <select onChange={this.handleFirstLevelChange} value={this.state.firstLevel}>
            {firstLevelOptions}
          </select>
        </p>
        <p>
          <select onChange={this.handleSecondLevelChange} value={this.state.secondLevel}>
            {secondLevelOptions}
          </select>
        </p>
      </div>
    )
  }
}

const options = {
  "USA": ["New York", "San Francisco"],
  "Germany": ["Berlin", "Munich"]
}

ReactDOM.render(
  <MyForm options={options} />,
  document.getElementById('app')
)

<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='app'></div>

​