在React中動態創建一個多級下拉菜單，並在下拉菜單中獲取所選子菜單的值

Question

我將如何動態創建一個多級下拉菜單並獲取所選子菜單。

Answer 1

您可以通過state並使用選定的event.target.value更新它來實現此目的。

 class App extends React.Component { state = { selectedOption: "" }; selectHandler = event => { console.log(event.target.value); this.setState({ selectedOption: event.target.value }); }; render() { let data = ["first", "second", "third", "fourth"]; return ( <select onChange={(event) => this.selectHandler(event)} value={this.state.selectedOption} > {data.map(value => ( <option value={value} key={value}> {value} </option> ))} </select> ); } } ReactDOM.render(<App/>, 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' />