Question

我正在创建一个带有两个下拉菜单的栏。第二个下拉列表取决于第一个下拉列表中的选择。我有3个组成部分： 1.下拉栏：包含FirstDropdown和Second Dropdown 2. FirstDropdown 3. SecondDropdown

试图通过状态->出现在FirstDropdown组件中的练习，作为对SecondDropdown组件的支持。显然，我没有正确执行此操作。任何帮助将不胜感激。预先谢谢你！

class DropdownBar extends React.Component {
constructor(props) {
    super(props);
}

render () {
    return (
        <div>
            <div className="top-bar">
                <Row>
                    <div style={{marginTop: 15, marginBottom:15}}>
                        <Col span={8}><FirstDropdown practice={this.props.practice} /></Col>
                        <Col span={8}><SecondDropdown /></Col> 

                    </div>
                </Row>
            </div>
        </div>
    )
}





class FirstDropdown extends React.Component {
constructor() {
    super();
    this.state = {
        practices: [
            name = 'Jon',
            name = 'potato',
            name = 'stark',
        ],
        practice: 'stark'
    }
}

onChangePractice(value) {
    console.log(`selected ${value}`);
    this.setState({
        practice: value
    })
}


render () {
    const {practices} = this.state

    return  (
        <div>
            <Row>
                <div className="First-dropdown">
                <Col span={8}><div className="dropdown-title">Research: </div></Col>
                <Col span={14}>
                    <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="Select a Something"
                    optionFilterProp="children"
                    onChange={this.onChangePractice.bind(this)}
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    >
                        {practices.map(practice => (
                            <Option
                            value={practice}
                            key={practice}
                            data-automation={practice.name}
                            >{practice}</Option>
                        ))}
                    </Select>                   
                </Col>
                </div>
            </Row>
        </div>

    )
}



class SecondDropdown extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        modules: [
            name = 'Drogon',
            name = 'Rhaegal',
            name = 'Viserion',
        ]
    }
}
componentDidUpdate(prevProps) {
    console.log(this.props.practice)
    if (!equal(this.props.practice, prevProps.practice)) 
    {
        this.updatePractice();

    }
} 

render () {
    const {modules} = this.state
    console.log(this.props.practice )
    let practice = this.props.practice;

    if (practice === 'stark') {
        return  (
            <div>
                <Row>
                    <div className="benchmark-dropdown">
                    <Col span={4}><div className="dropdown-title">Module: </div></Col>
                    <Col span={16}>
                        <Select
                        showSearch
                        style={{ width: '100%' }}
                        placeholder="Select Something"
                        optionFilterProp="children"
                        onChange={onChange}
                        onFocus={onFocus}
                        onBlur={onBlur}
                        onSearch={onSearch}
                        filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                            {modules.map(item => (
                                <Option
                                value={item}
                                key={item}
                                >{item}</Option>
                            ))}
                        </Select>                   
                    </Col>
                    </div>
                </Row>
            </div>

        )
    } else {
        return <div> NOOOOO </div>
    }

}

Answer 1

我会把州拉进父母。

class MainBar extends React.Component {
  state = {
    practice: null
  };
  
  handleChange = practice => {
    this.setState({ practice });
  }
  
  render() {
    return (
      <div className="top-bar">
        <Row>
          <div style={{marginTop: 15, marginBottom:15}}>
              <Col span={8}>
                <FirstDropdown 
                  onChange={this.handleChange}
                  practice={this.state.practice}
                />
              </Col>
              <Col span={8}>
                <SecondDropdown practice={this.state.practice} />
              </Col> 
          </div>
        </Row>
      </div>
    );
  }
}

Answer 2

为了使两个下拉菜单都可以访问practice道具，您需要将其提升到DropdownBar的状态，并向下传递practice和更新practice的方法

class DropdownBar extends Component {
  state = {
    practice: '',
  }

  handlePracticeChange = (value) => {
    setState({ practice: value });
  }

  render() {
    return (
      <div>
        <FirstDropdown
          practice={this.state.practice}
          onPracticeChange={this.handlePracticeChange}
        />
        <SecondDropdown practice={this.state.practice} />
      </div>
    )
  }
}

因此，practice仅生活在DropdownBar中，而实践数组应生活在FirstDropdown子项中。

在FirstDropdown中，您应将props.onPracticeChange传递到Select的{{1}}：

onChange

在您的代码示例中，“选择”似乎将当前选择的class FirstDropdown extends Component { render() { ... <Select onChange={this.props.onPracticeChange} ... } }传递给value。

React-如何通过将状态作为道具从另一个下拉列表中进行选择来填充一个下拉列表

2 个答案: