react 父组件中点击按钮，子组件向其传递数据。

Question

问题：
使用的antd，定义了一个model组件和form组件，form组件作为model组件的子组件，在父组件app中，使用组件model，想要点击submit的时候获取到子组件的表单数据。
获取到的表单数据怎么在submit按钮被点击的时候才传递过去?
如图：

代码：

app.tsx

<ModelComponent
    onCancel={this.visibleHandler}
    onSubmit={this.submitHandler}
    visible={this.state.infoModalVisible}
    selectedData={this.state.selectedUserInfo}
    modalType={this.state.modalType}
/>

mode.tsx

<Modal
    key={Math.random()}
    title="Edit"
    visible={this.props.visible}
    onOk={this.props.onSubmit}
    onCancel={this.props.onCancel}
    okText="Submit"
    cancelText="Cancel"
    maskClosable={false}
>
    <FormComponent
        data={this.props.selectedData}
        onSubmit={this.props.onSubmit}
    />
</Modal>

form.tsx

class FormComponent extends React.Component<FormProps> {

    componentDidMount() {
        setFormValue(this.props.data, this.props.form);
        this.props.onSubmit(this.props.form.getFieldsValue());
        // 获取到的表单数据怎么在submit按钮被点击的时候才传递过去？
    }

    render() {
        const { form } = this.props;
        const { getFieldDecorator } = this.props.form;

        return (
            <div>
                {formItemList(this.props.data, getFieldDecorator)}
            </div>
        );
    }

}

export default Form.create<FormProps>()(FormComponent);

我现在这样操作只能在组件DidMount的时候才能获取到一次数据，当点击submit的时候会得到如下图的Proxy的一个数据？

Answer 1

直接在model的onClick事件中调用form组件的validateFields方法

this.props.form.validateFields((err,value) {
    // value 就是整个表单的所有数据
})

Answer 2

validateFields的第二个参数就可以拿到form表单的所有属性值
拿到数据后，直接dispatch一个effects就可以了。

给你一个login的例子。

Answer 3

两种方式供参考，1：给form层（子层）添加refs，在父层的submit事件中通过refs获取子层实例调用validateFields等方法。2：在model层（父层）增加一个checked的state，每次点击submit按钮，this.state.checked+1，然后通过props传给form层，form层在componentWillReceiveProps监听this.props.checked变化，触发validateFields获取数据，再触发this.props.submit事件~