（React）動的なドロップダウンボックスの例。の仕方？

Question

誰かが動的なReactドロップダウンボックスの例の方向に私を指摘できますか？

プライマリドロップダウン選択の結果を受け取り、セカンダリドロップダウンリストの出力を決定するドロップダウン機能を実装したいと考えています。たとえば、プライマリドロップダウンリストから「ロンドン」を選択すると、ロンドン内の地域（市区町村）のセカンダリドロップダウンボックスが表示されます。

私はfirebasedbからデータを選択することによってドロップダウンボックスにデータを入れることを計画しています。

Answer 1

あなたの小道具や状態から動的に反応する選択ボックスのオプションのリストを作成することができます。 これはどのように表示されるのかについて、という例の下でスニペットを実行します。

react's docs for more info on <select> 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>