表單驗證與表單組件

我不確定如何使用antd <Form/>組件發現here進行表單驗證。該文檔在<Form/>組件上指定了onSubmit prop，該組件傳遞了一個事件。然後它似乎觸發this.props.form中的一個函數。我目前使用下面的代碼：表單驗證與表單組件

handleSubmit(e) { 
    e.preventDefault(); 

    console.log('before' + e.target.value) 

    this.props.validateFields((err, values) => { 
    console.log('errors: ' + err) 
    console.log(values) 
    if (!err) { 
     console.log('Received values of form: ', values); 
    } 
    }); 
} 

<Form inline onSubmit={this.handleSubmit.bind(this)}> 
    .... 
</Form>

我無法從傳遞到提交回調的情況下檢索值，如e.target.value返回undefined。
1. 在調用this.props.validateFields()時，如文檔所示，這些值來自哪裏？

來源

2017-01-12 Orbit

整個表單數據由antd表單組件管理，所以你不需要通過e.target.value得到那麼，你需要的是調用

this.props.form.validateFields((err, values) => { 
     if (!err) { 
     console.log('Received values of form: ', values); 
     } 
    });

當過要做驗證。如果出現錯誤或全套表單數據，此回調會提供給您。

values來源於它由Form.create();

this.props.form注入也由Form.create()注入形式的道具，否則你將得到不確定的，如：

class MyComponent extends React.Component { 
... 
} 

export default Form.create()(MyComponent);

您還可以使用validateFieldsAndScroll代替validateFields這會自動滾動到發生錯誤的字段。

來源

2017-01-13 18:00:26 Kossel

這是我原來嘗試過，但'form'是一致的定義。因爲它是一個道具，我認爲它需要由父組件傳入。如何在嵌套字段中傳遞prop，比如'this.props.form.validateFields'，以及該函數的簽名在父代中的樣子是什麼？ – Orbit

'this.props.form'由'Form.create'中的高階函數注入，讓我更新答案 – Kossel

這實際上就是我最終的結果。這些錯誤是由於在幾個處理程序中錯過了'.bind（this）'而引起的，導致道具出現問題。我會標記你的答案是正確的。 – Orbit

我知道它已經很晚了，也不知道你有同樣的問題。但最近我遇到了像表單值這樣的問題，並不適合我。所以我使用了下面的代碼，它對我的工作很好。願它能幫助別人。

handleSubmit = (e) => { 
    e.preventDefault(); 
    this.props.form.validateFieldsAndScroll((err, values) => { 
     if (err) { 
      return; 
     } 

     alert(JSON.stringify(values)); 
    }); 
}

，並在形式

<Form onSubmit={this.handleSubmit}>

來源

2017-09-11 11:23:37 Jaison

表單驗證與表單組件

回答

相關問題