Реагируйте, обновите chexkbox правильно - PullRequest
Новая
       17

Реагируйте, обновите chexkbox правильно

0 голосов
/ 29 апреля 2020

Привет, моя проблема в том, что у меня есть компонент parrent, у которого есть флажок. Этот parrent-компонент также имеет много дочерних компонентов с чечбоксами. Мне нужно сделать это: если я нажимаю флажок parrent, мне также нужно установить флажок установки дочернего состояния. Но после этого я смогу отключить некоторые дочерние chcekboxes,

Мой дочерний okmponent liik вот так: 

export class ThemePartKnowledge extends Component {

    static get propTypes() {
        return {
            knowledge: PropTypes.object.isRequired,
        };
    }

    constructor(props) {
        super(props);
        this.state = {
            isChecked:false,
        }
    }


    render() {
        return (
            <Card className={'themePartKnowledge ml-2'}>
                <Card.Header className={'d-flex flex-column flex-md-row p-x0'}>
                        <Form.Group controlId="formBasicCheckbox" className={'m-0 d-inline-block'}>
                            <Form.Check c type="checkbox" className={'my-auto'}/>
                        </Form.Group>
                  </Card.Header>
            </Card>
        );
    }
}

Мой контроллер parrent просто отправляет реквизиты isParrentChcecked этому компоненту.

Как я мог сделать это, что я хочу? Спасибо за помощь

Редактировать: Итак, моя структура выглядит следующим образом

  • Parrent
    • Child
    • Child
    • Child

1 Ответ

1 голос
/ 29 апреля 2020

componentDidUpdate делает именно это. Здесь, когда isParentChecked меняется, я синхронизирую свое состояние isChecked с родителем. 

componentDidUpdate(prevProps, prevState){
  if(prevProps.isParentChecked !== this.props.isParentChecked){
    this.setState({isChecked: this.props.isParentChecked})
  }
}
...