React 子组件如何操作父组件的 setState ?

Question

问题：在子组件<Modal>标签中取消按钮onCancel={this.handleCancel}，调用handleCancel方法，关闭当前弹窗（将
父组件state中TableModalVisible值改为false.

子组件如何接收，及修改父组件的state.TableModalVisible ？

父组件代码片断：

class AeModel extends React.Component {
  constructor(props: any){
    super(props);
      this.state = { 
        TableModalVisible: false       //需要在子组件修改的值
        };
  }
    
  render() {
  return (
      <div>
      <div  onDoubleClick={e => {
            this.setState({TableModalVisible: true})
                          }} 
       >打开显示弹窗（子组件）</div>
       
        //省略内容
        
      <TableForm
        TableModalVisible={this.state.TableModalVisible}
      />
      </div>
  );
};
}
export default AeModel;

子组件代码片断：

class TableForm extends Component<TableFormProps, TableFormState> {

  constructor(props) {
    super(props);
    this.state = {
    };
  }
  
  handleCancel = e => {
    console.log(e);
    this.setState({
           //                           这里如何写 ？
    });
  };

  render() {
    const {TableModalVisible,} = this.props;
    return (
      <Modal
        visible={TableModalVisible}
        onOk={this.okHandle}
        onCancel={this.handleCancel}
        ... ... 
      >
        <Form >          
            //内容省略... 
        </Form>
      </Modal>
    );
  }
}

export default xxx;

Answer 1

父组件定义关闭的回调，传入子组件，子组件调用

Answer 2

1. 在父组件中自定义定义方法change

ModelState()此方法调用setState修改父组件状态

1. 在子组件中定义一个自定义属性childChange，并在父组件引用子组件处，设置该属性，如childChange=｛()=>{changeModelState()}｝
2. 在子组件实现中的事件中调用onChildChange， 如onClick={()=>{childChange()}}

描述起来比较麻烦，其实实现很简单