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

IT技术 javascript jquery reactjs
2021-05-06 18:48:00

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

如果我在majorhead中选择作弊，那么它应该在minorHead和apple中显示a＆b，在Method中显示橙色。

如果我在majorhead中选择abduction，那么它应该在minorhead中显示AB&BC，在Method中显示cat、dog...

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;
1个回答

对于主要头部选择中的每个选项，我将为方法和次要创建一个支持值的数组。

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>

像这样的结构将允许您（在您最初的 MAJOR 选择中）map覆盖您VIEWS的nameprops并将其应用于选项。

然后，您可以使用另一个地图显示另外两个选择（次要和方法），其中VIEWS相对minor和method数组是它们的选项

其它你可能感兴趣的问题
上一篇为什么我的打印机可以显示剩余时间而 OctoPrint 不能？ 下一篇在 GrabCAD Print 中不支持打印“毛发”