React ant.design Modal对话框怎么触发子组件的动作？

Question

如何通过React中的父组件，触发子组件中的动作。

import {Modal} from 'antd'

<Modal
  visible={this.state.componentModalVisible}
  title="父组件"
  onOk={this.handleOk}
  onCancel={this.handleCancel}
  footer={[
    <Button key="back" onClick={this.handleCancel}>取消</Button>,
    <Button key="submit" type="primary" onClick={this.handleOk}>保存</Button>
  ]}>
  <Child /> // 希望父组件的`保存`按钮触发子组件中的动作，或者获取子组件中的state信息也可以
</Modal>

Answer 1

父组件要想获取子组件的state，只能通过回调函数，例如：

getData = (data)=>{
    console.log('子组件data',data)
}

<child getData={this.getData} />

// child

onClick={()=>{
    const data = this.state.data;
    this.props.getData(data);
}}

Answer 2

父组件可以用ref掉起自组件的方法。
for example:

//父组件
<Modal
  visible={this.state.componentModalVisible}
  title="父组件"
  onOk={this.ref.child.handleClick}
  onCancel={this.handleCancel}
  footer={[
    <Button key="back" onClick={this.handleCancel}>取消</Button>,
    <Button key="submit" type="primary" onClick={this.handleOk}>保存</Button>
  ]}>
  <Child ref={(c)=>{this.child=c}} /> // 希望父组件的`保存`按钮触发子组件中的动作，或者获取子组件中的state信息也可以
</Modal>

//子组件
handleClick(){
    //...
}

Answer 3

既然保存按钮在父组件，为什么不将要保存的所有信息以及用到的方法也存在父组件中呢？然后将父组件中的this 传给子组件，子组件可以通过props 来得到数据或者改变数据。

<Child parent={this}/> // 这里将父组件的this传给子组件;

//子组件通过
this.props.parent.state.父组件数据; //拿到父组件的数据
this.props.parent.setState({父组件数据:新数据});//改变父组件的数据
this.props.parent.父组件方法;//调用父组件的方法