Javascript 反应-如何通过将状态作为道具传递，根据从另一个下拉列表中的选择填充一个下拉列表

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

试图将第一个下拉组件中作为道具出现的状态->实践传递给第二个下拉组件。显然我做得不对。任何帮助都将不胜感激。提前谢谢你

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

}

class DropdownBar扩展了React.Component{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
)
}
类FirstDropdown扩展了React.Component{
构造函数（）{
超级（）；
此.state={
做法：[
name='Jon'，
名称='马铃薯'，
name='stark'，
],
练习：“斯塔克”
}
}
变更实践（价值）{
log（`selected${value}`）；
这是我的国家({
实践：价值
})
}
渲染（）{
const{practices}=this.state
返回(
研究：
option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
{practices.map（practices=>(
{实践}
))}
)
}
类SecondDropdown扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
模块：[
名称='Drogon'，
名称='Rhaegal'，
名称='Viserion'，
]
}
}
componentDidUpdate（prevProps）{
console.log（this.props.practice）
如果（！相等（this.props.practice，prevProps.practice））
{
这个.updatePractice（）；
}
} 
渲染（）{
const{modules}=this.state
console.log（this.props.practice）
让练习=这个。道具。练习；
如果（实践==‘斯塔克’）{
返回(
模块：
option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
{modules.map（项=>(
{item}
))}
)
}否则{
返回NOOOOO
}
}

我会将状态拉入父级

类主栏扩展React.Component{
状态={
做法：无效
};
handleChange=实践=>{
这个.setState（{practice}）；
}
render（）{
返回(
);
}
}

为了让两个下拉菜单都能访问

练习

道具，您需要将其提升到下拉菜单栏的状态，并同时传递

练习

和更新

练习

的方法

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

---

从您的代码示例来看，Select似乎将当前选择的

值传递到
onChange
谢谢@helloitsjoe…这很好！只是有问题知道我应该传递/包括在
onChange实践中的哪些内容
-FirstDropdown以便传递被选择的值现在有意义了！谢谢！呼叫
props.onChange（value）
当你进行
onChange练习时。
class FirstDropdown extends Component {
  render() {
    ...
    <Select
      onChange={this.props.onPracticeChange}
    ...
  }
}