フォームコンポーネントを使用したフォーム検証

Question

antd <Form/>コンポーネントでフォームの検証を行う方法がわからないhereドキュメントには、<Form/>コンポーネントのonSubmit小道具が指定されており、イベントが渡されます。それは、this.props.formの中で機能を引き起こすようです。私は現在、次のコードを使用しています：私はe.target.value戻り未定義として、提出するコールバックに渡されたイベントから値を取得することができません

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> 

1. 。

   2. this.props.validateFields()への呼び出しでは、これらの値はどこから来ていますか？

Answer 1

フォーム全体のデータがantd Formコンポーネントによって管理されている、だからあなたはあなたが必要なもの、e.target.valueによって、その後取得する必要はありません、あなたがしたいこれまでとき

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

を呼び出すことです検証を行います。このコールバックは、エラーまたはフォームデータの完全なセットがある場合にあなたに提供します。

valuesForm.create();

this.props.formによって注入されたフォームの小道具から来ても例えば、そうでなければ、未定義のでしょう、Form.create()によって注入されています

class MyComponent extends React.Component { 
... 
} 

export default Form.create()(MyComponent); 

ます。またvalidateFieldsAndScroll代わりのvalidateFieldsどれを使用することができますエラーが発生したフィールドに自動的にスクロールします。

Answer 2

私はそれもあなたが同じ問題を抱えていたかどうかは非常に遅いことを知っています。最近、私はフォームの値が私には得られないような問題を抱えていました。だから私は以下のコードを使って私のためにうまくいっている。それが他の人を助けてくれるかもしれない。

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

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

と形で

<Form onSubmit={this.handleSubmit}>