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

小编典典

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

reactjs

我需要根据使用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;

阅读 464

2020-07-22

共1个答案

小编典典

对于您的主标题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>

这样的结构将允许您（在最初的MAJOR选择范围内）map遍历您的模型VIEWS并将nameprop应用于选项。

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

2020-07-22