antDesign獲取表單組件的值


子組件中:
 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)
  ......
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM