React-如何根据另一个中的选择填充两个下拉列表

Z时代
2024-01-10
分类：问答

我需要根据使用React的MajorHead下拉菜单中的选择更改下拉Method＆Minorhead的内容。

如果我选择在mainhead中作弊，则应该在minorHead和Apple中显示a＆b，在Method中显示橙色。

如果我在主脑中选择绑架，则应该在“方法”中以未成年人和猫，狗显示AB＆BC。

import React, { Component } from 'react';
class Profile extends Component {
    render() {
        return (
            <form>
                <div className="form-group">
                    <label for="inputState">Major head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>Cheating</option>
                        <option>Abduction</option>
                        <option>House brake</option>
                </div>
                <div className="form-group">
                    <label for="inputState">Minor head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>a</option>
                        <option>b</option>
                        <option>AB</option>
                        <option>BC</option>
                        <option>X</option>
                        <option>Y</option>
                </div>
                <div className="form-group">
                    <label for="inputState">method</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>apple</option>
                        <option>orange</option>
                        <option>cat</option>
                        <option>dog</option>          
                </div>
            </form>
        )
    }
}
export default Profile;

回答：

对于您的主标题Select中的每个选项，我将为method和minor创建一个受支持的值数组。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedView: 'Cheating'
    }
  }
  render() {
    const { selectedView } = this.state
    const VIEWS = [
      {
        name: 'Cheating',
        minor: ['a', 'b'],
        method: ['apple', 'orange']
      }, {
        name: 'Abductions',
        minor: ['AB', 'BC', 'X'],
        method: ['cat', 'dog']
      }
    ]
    const getMajorMethod = () => {
      const view = VIEWS.filter(({name}) => name === selectedView)[0]
      return (
        <div>
          <select>
            {view.minor.map(m => <option>{m}</option>)}
          </select>
          <select>
            {view.method.map(m => <option>{m}</option>)}
          </select>
        </div>
      )
    }
    return (
      <div>
        <select onChange={(e) => this.setState({selectedView: e.target.value})}>
          {VIEWS.map(({name}) => <option value={name}>{name}</option>)}
        </select>
        {getMajorMethod()}
      </div>
    )
  }
}
ReactDOM.render(<App />, 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>