子組件中:
getFormValue是在點擊確定按鈕獲取表單值得事件函數,一旦執行就會執行里邊的validate()回調函數
返回的數據中有error和value兩種,如果存在error那就是其中某一個表單控件出了問題(比如有一個必須填的項沒有填
獲取到了value后將之return出去
在從父組件中獲取就可以了,在父組件中使用this.form.getFormValue.then(data)來進行獲取
getFormValue = async () => {
const res = await this.validate();
if (res.error) {
return null;
}
const obj = res.value;
return obj;
};
首先引入form: { validateFieldsAndScroll }這個方法,因為form整體組件肯定是放在一個父組件中的,直接引入即可
然后直接return一個promise結果
validate = () => {
const {
form: { validateFieldsAndScroll },
} = this.props;
return new Promise(resolve => {
validateFieldsAndScroll((error, value) => {
resolve({ error, value });
});
});
};
父組件中:使用ref來獲取子組件中的方法
例如:
這里的 wrappedComponentRef={i => {
this.form = i;
}}
就是獲取到了子組件中所有的方法,
但要注意:子組件必須已經掛載才能獲取,否則this.form是undefined
然后就是
this.form.getFormValue().then(data => {
// console.log(data)
......
})