react：父—>子通信

很熟悉子组件通过props来调用父组件的方法；
先看一下这个页面功能：现在需要用到父组件调用子组件的方法，基于这个功能，做一个优化，简单介绍下：

1. 父组件实现的功能
   （1）点击确定，获取子组件的选中数据；
   （2）点击取消，弹框关闭；
2. 子组件实现的功能
   （1）选中条例的状态变化，并渲染出来

页面显示如下：

image.png

优化目的：父组件关闭弹框的同时，将子组件的数据全部还原不选中
思考：因为数据是在子组件控制并改变的，因此改动也需要在子组件改变并渲染，所以，需要子组件暴露出来一个方法，专门清除或重置子组件选中，供父组件调用。
用到的思想：通过把子组件的this实例绑定在父组件的一个属性上，如：this.child。
实现：

// AddModal父组件

  // 关闭弹框
  onCancel = () => {
        const { form: { resetFields }, closeModal } = this.props;
        closeModal();
        resetFields();
        this.child.resetAllCatalog();
  }
  // 传给子组件的方法：获取子组件this实例
  onRef = ref => {
        this.child = ref;
  }
  render() {
      return (
              <FormItem
              {...formItemLayout}
              label='产品名称'
              >
                   {
                        getFieldDecorator('catalogIds')(
                              <CheckboxCom allCatalog={allCatalog} onRef={this.onRef} />
                          )
                    }
                </FormItem>
      );
  }

// CheckBox子组件

componentDidMount() {
        // 必写，将this传给父组件的onRef方法
        this.props.onRef(this);
    }
    // 清除、重置选中
    resetAllCatalog = () => {
        const { allCatalog } = this.props;
        let newAllCatalog = allCatalog.map(item => {
            item.isChecked = false;
            return item;
        });
        this.setState({
            allCatalog: newAllCatalog, // 初始化渲染的最终数据
            indeterminateAll: false,
            checkedAll: false
        });
    }