如何在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.

说这是我想要值的项目

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

这是类别选项

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 helper 更改为 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屋！