鍍金池/ 問(wèn)答/HTML/ react 父組件中點(diǎn)擊按鈕，子組件向其傳遞數(shù)據(jù)。

react 父組件中點(diǎn)擊按鈕，子組件向其傳遞數(shù)據(jù)。

問(wèn)題：
使用的antd，定義了一個(gè)model組件和form組件，form組件作為model組件的子組件，在父組件app中，使用組件model，想要點(diǎn)擊submit的時(shí)候獲取到子組件的表單數(shù)據(jù)。
獲取到的表單數(shù)據(jù)怎么在submit按鈕被點(diǎn)擊的時(shí)候才傳遞過(guò)去?
如圖：
圖片描述

代碼：

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());
        // 獲取到的表單數(shù)據(jù)怎么在submit按鈕被點(diǎn)擊的時(shí)候才傳遞過(guò)去？
    }

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

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

}

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

我現(xiàn)在這樣操作只能在組件DidMount的時(shí)候才能獲取到一次數(shù)據(jù)，當(dāng)點(diǎn)擊submit的時(shí)候會(huì)得到如下圖的Proxy的一個(gè)數(shù)據(jù)？
圖片描述

回答
編輯回答
孤星

validateFields的第二個(gè)參數(shù)就可以拿到form表單的所有屬性值
拿到數(shù)據(jù)后，直接dispatch一個(gè)effects就可以了。

給你一個(gè)login的例子。

2017年7月7日 11:55
編輯回答
臭榴蓮

兩種方式供參考，1：給form層（子層）添加refs，在父層的submit事件中通過(guò)refs獲取子層實(shí)例調(diào)用validateFields等方法。2：在model層（父層）增加一個(gè)checked的state，每次點(diǎn)擊submit按鈕，this.state.checked+1，然后通過(guò)props傳給form層，form層在componentWillReceiveProps監(jiān)聽this.props.checked變化，觸發(fā)validateFields獲取數(shù)據(jù)，再觸發(fā)this.props.submit事件~

2017年5月24日 06:33
編輯回答
憶往昔

直接在model的onClick事件中調(diào)用form組件的validateFields方法

this.props.form.validateFields((err,value) {
    // value 就是整個(gè)表單的所有數(shù)據(jù)
})
2018年5月9日 11:42