javascript - react ，正确更新复选框

Question

您好，我的问题是我的父组件有一个复选框。这个父组件也有许多带有复选框的子组件。我需要这样做:如果我单击父复选框，我还需要设置状态子复选框。但之后我应该能够取消单击一些子复选框，

我的 child 喜欢这样:

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

我的父 Controller 只是向该组件发送 isParrentChecked 属性。

我怎样才能做到我想要的？谢谢帮助

编辑:所以我的结构看起来像这样

• 家长
  • child
  • child
  • child

Answer 1

componentDidUpdate正是这样做的。每当 isParentChecked 发生变化时，我都会将我的 isChecked 状态同步到父级。

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