Реакция - Как заполнить одно выпадающее меню на основе выбора из другого раскрывающегося списка путем прохождения состояния в качестве реквизита

Question

Я создаю бар с двумя выпадающими. Второе раскрывающееся меню зависит от выбора из первого раскрывающегося списка. У меня есть 3 компонента: 1. Панель выпадающего меню: содержит первый выпадающий и второй выпадающий список 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

Чтобы оба раскрывающихся списка имели доступ к реквизиту practice, вам необходимо поднять его до состояния DropdownBar и передать оба значения practice и способ обновления practice.

* 1005.*

Таким образом, practice живет только в DropdownBar, а массив тренировок должен находиться в потомке FirstDropdown.

В FirstDropdown вы должны передать props.onPracticeChange вашим Select onChange:

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

Из вашего примера кода, похоже, что Select передает текущий выбранный value в onChange.

Answer 2

Я бы вытащил состояние в родительский.

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