如何在antd中获取FormItem更改时的字段值 [英] how to get field value on change for FormItem in antd

问题描述

我在使用antd的格式时遇到了困难. 我在此表单中有此选择字段，我想从onChange上获取值，但不知如何使其无法正常工作.

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly.

说这是我想要其值的项目

say this is the item for which I want the values

<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

this is the 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 所以我创建了一个handleCategoryChange，它被称为onChange 我就能得到想要的字段.

I want both the name of the category and the id so I created a handleCategoryChange which gets called onChange and I am able to get the fields I want.

但是，现在看来，我必须在该字段上单击两次以正确选择它. 如果我只单击一次，它就会显示在控制台中.但是表单上的字段仍然为空.当我再次单击它时，该字段也会显示在表单中.

But, it seems that now, I have to click twice on the field to properly select it. If I click it just once then it does show up in the console. but the field on the form still remains empty. when I click it again, then the field shows up in the form too.

那么，我在这里做错了什么. 没错！这是handleCategoryChange函数

So, what am I doing wrong here. Ah,yes! Here's the handleCategoryChange function

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

只是要让自己清楚一点. 在单击提交之前，我需要这些值. 不在提交上.

Just to make myself clear. I need those values before I click submit. not on submit.

推荐答案

尝试一下:

<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函数上

And on the handleCategoryChange function

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

基本上，将onChange从getFieldDecorator助手更改为Select，这样就不会与antd的自然行为打交道，而是获取值并更改状态

Basically, changing the onChange from the getFieldDecorator helper to the Select, so it doesn't mess with antd's natural behavior, but gets the value and change on state

我已经根据他们网站上注册表格的代码得出了这个答案.具体来说，handleWebsiteChange函数

I've based this answer on the code to the registration form on their website. Specifically, the handleWebsiteChange function

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

这篇关于如何在antd中获取FormItem更改时的字段值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！