web-dev-qa-db-fra.com

comment obtenir la valeur du champ lors d'un changement pour FormItem dans antd

J'ai du mal avec la forme d'Antd. J'ai ce champ de sélection dans ce formulaire et je veux en obtenir la valeur onChange mais en quelque sorte ne pas le faire fonctionner correctement.

dire que c'est l'élément pour lequel je veux les valeurs

<FormItem
  {...formItemLayout}
  label={fieldLabels.qcategoryid}
  validateStatus={categoryError ? "error" : ""}
  help={categoryError || ""}
>
  {getFieldDecorator("qcategoryid", {
    rules: [{ required: true, message: "Please select Category!" }],
    onChange: this.handleCategoryChange
  })(<Select>{categoryOptions}</Select>)}
</FormItem>

c'est la catégorieOptions

if (this.props.categories) {
  categoryOptions = this.props.categories.map(item => (
    <Select.Option
      key={item.categoryid}
      value={item.categoryid}
      name={item.categoryname}
    >
      {item.categoryname}
    </Select.Option>
  ));
}

Je veux à la fois le nom de la catégorie et l'id, j'ai donc créé un handleCategoryChange qui s'appelle onChange et je peux obtenir les champs que je veux.

Mais il semble que maintenant, je dois cliquer deux fois sur le champ pour le sélectionner correctement. Si je clique dessus une seule fois, il apparaîtra dans la console. mais le champ du formulaire reste vide. lorsque je clique à nouveau dessus, le champ apparaît également dans le formulaire.

Alors, qu'est-ce que je fais mal ici. Ah oui! Voici la fonction handleCategoryChange

handleCategoryChange = (value, e) => {
  console.log("value is : ", value);
  console.log("e : ", e);
  this.props.form.setFieldsValue({ qcategoryid: value });
  this.setState({
    categorySelected: value,
    categoryname: e.props.name
  });
};

Juste pour être clair. J'ai besoin de ces valeurs avant de cliquer sur soumettre. pas sur soumettre.

javascriptreactjsformsantd
7
faraz

Essaye ça:

<FormItem
  {...formItemLayout}
  label={fieldLabels.qcategoryid}
  validateStatus={categoryError ? "error" : ""}
  help={categoryError || ""}
>
  {getFieldDecorator("qcategoryid", {
    rules: [{ required: true, message: "Please select Category!" }]
  })(<Select onChange={this.handleCategoryChange}>{categoryOptions}</Select>)}
</FormItem>

Et sur la fonction handleCategoryChange

handleCategoryChange = (value, e) => {
  this.setState({
    categorySelected: value,
    categoryname: e.props.name
  });
};

Fondamentalement, le changement de onChange de l'aide getFieldDecorator en Select, afin qu'il ne perturbe pas le comportement naturel de antd, mais obtient la valeur et change l'état

J'ai basé cette réponse sur le code du formulaire d'inscription sur leur site Web. Plus précisément, la fonction handleWebsiteChange

https://ant.design/components/form/#components-form-demo-register

1
iagowp

Je me rends compte que c'est super tard, mais je pense que c'est peut-être ce que OP recherchait:

https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79

Pour définir des champs sur un formulaire de manière dynamique, par exemple chez un enfant via un rappel, vous pouvez utiliser

    this.props.form.setFields({
      user: {
        value: values.user,
        errors: [new Error('forbid ha')],
      },
    });

dans une méthode handleSelect définie par le parent que vous avez appelée depuis l'enfant sur une valeur sélectionnée. vous pouvez également utiliser setFieldsValue si vous ne voulez pas passer un champ d'erreur

0
mburke05