React - 如何根据另一个中的选择填充两个下拉菜单 [英] React - How to Populate two Dropdowns based on selection in another

问题描述

我需要根据使用React下拉MajorHead中的选择来更改下拉方法和小头的内容。

I need to change the contents of dropdown Method&Minorhead based on the selection in dropdown MajorHead using React.

如果我选择在majorhead作弊，那么它应该是显示& b in minorHead和apple，orange in Method。

If I select cheating in majorhead, then it's supposed to show a&b in minorHead and apple, orange in Method.

如果我选择在majorhead中绑架，那么它应该显示在小头和猫，AB中的AB& BC方法...

If I select abduction in majorhead, then it's supposed to show AB&BC in minorhead and cat, dog in Method...

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;                

推荐答案

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

For each option in your major head Select, i would create an array of supported values for method and 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 并且将 name prop应用于选项。

A structure like this will allow you to (within your initial MAJOR select) map over your VIEWS and apply the name prop to the options.

然后，您可以使用 VIEWS relative <另一个地图显示另外两个选择（次要和方法） code>次要和方法数组是他们的选择

You can then have another map that shows two other selects (minor & method) with the VIEWS relative minor and method arrays being their options

这篇关于React - 如何根据另一个中的选择填充两个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！