Question

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

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

如果我选择在majorhead绑架，那么它应该在方法中显示AB＆amp; BC in minorhead and 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;

Answer 1

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

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

这样的结构允许您（在初始MAJOR选择内）map超过VIEWS并将name道具应用于选项。

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

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

1 个答案: