javascript - React - 如何通过将 State 作为 props 传递来根据另一个下拉列表中的选择来填充一个下拉列表

Question

我正在创建一个带有两个下拉菜单的栏。第二个下拉列表取决于第一个下拉列表中的选择。我有 3 个组件:1. 下拉栏:包含 FirstDropdown 和 Second Dropdown2.第一个下拉菜单3.第二个下拉菜单

尝试将 FirstDropdown 组件中出现的 State -> Practice 作为 props 传递给 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

为了让两个下拉菜单都能访问 practice 属性，您需要将其提升到 DropdownBar 的状态，并向下传递 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 中，而practice 数组应该存在于 FirstDropdown 子项中。

在 FirstDropdown 中，您应该将 props.onPracticeChange 传递给 Select 的 onChange:

class FirstDropdown extends Component {
  render() {
    ...
    <Select
      onChange={this.props.onPracticeChange}
    ...
  }
}

从您的代码示例来看，Select 似乎将当前选定的值 传递给onChange。