Validation de formulaire avec le composant de formulaire

Question

Je ne suis pas sûr de la façon de faire la validation de formulaire avec le composant antd <Form/> trouvé here. La documentation spécifie un prop onSubmit sur le composant <Form/>, auquel un événement est transmis. Il semble alors déclencher une fonction à l'intérieur this.props.form. Je suis actuellement en utilisant le code suivant:

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. Je suis incapable de récupérer les valeurs de l'événement passé dans le rappel soumettre, comme e.target.value renvoie undefined.

   2. Dans l'appel à this.props.validateFields(), comme indiqué dans la documentation, d'où proviennent ces valeurs?

Answer 1

Les données de forme entière est gérée par le composant ANTD de formulaire, vous n'avez pas besoin d'obtenir puis par e.target.value, ce que vous avez besoin est d'appeler

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

Chaque fois que vous voulez faire la validation. ce rappel vous fournit s'il y a une erreur ou l'ensemble complet des données de formulaire.

values vient de la forme des accessoires qui est injecté par Form.create();

this.props.form est également injecté par Form.create(), sinon vous obtiendrez non défini, par exemple:

class MyComponent extends React.Component { 
... 
} 

export default Form.create()(MyComponent); 

Vous pouvez également utiliser validateFieldsAndScroll au lieu de validateFields qui défilera automatiquement vers le champ où une erreur est survenue.

Answer 2

Je sais qu'il est très tard aussi pas sûr que vous avez eu le même problème. mais récemment j'ai eu le problème comme les valeurs de forme ne sont pas pour moi. J'ai donc utilisé le code ci-dessous et son fonctionnement correct pour moi. Que cela aidera quelqu'un d'autre.

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

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

et sous la forme

<Form onSubmit={this.handleSubmit}>