web-dev-qa-db-ja.com

antdのFormItemの変更時にフィールド値を取得する方法

私はantdの形式に苦労しています。このフォームにこの選択フィールドがあり、onChangeから値を取得したいのですが、どういうわけか適切に動作しません。

これは私が値を求めているアイテムだと言う

<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>

これはcategoryOptionsです

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>
  ));
}

カテゴリの名前とIDの両方が必要なので、onChangeという名前のhandleCategoryChangeを作成し、必要なフィールドを取得できます。

しかし、適切に選択するには、フィールドを2回クリックする必要があるようです。一度クリックすると、コンソールに表示されます。ただし、フォームのフィールドは空のままです。もう一度クリックすると、フォームにもフィールドが表示されます。

だから、私はここで間違っていますか？ああ、そうだ！これが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
  });
};

明確にするためです。 [送信]をクリックする前に、これらの値が必要です。送信しません。

javascriptreactjsformsantd
7
faraz

これを試して：

<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>

そして、handleCategoryChange関数で

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

基本的に、onChangeをgetFieldDecoratorヘルパーからSelectに変更します。これにより、antdの自然な動作を混乱させず、値を取得して状態を変更します。

この回答は、彼らのウェブサイトの登録フォームのコードに基づいています。具体的には、handleWebsiteChange関数

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

1
iagowp

私はこれが非常に遅いことを理解していますが、私はこれがOPが探していたものだと思います：

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

フォーム上のフィールドを動的に設定するには、例えばコールバック経由の子では、使用できます

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

選択した値の子から呼び出した親定義handleSelectメソッド内。エラーフィールドを渡したくない場合は、代わりにsetFieldsValueを使用できます

0
mburke05