如何在antd中获取FormItem更改的字段值答案

【问题标题】：how to get field value on change for FormItem in antd如何在antd中获取FormItem更改的字段值
【发布时间】：2018-07-19 13:19:02
【问题描述】：

我很难适应 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>

这是类别选项

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 并且我能够得到我想要的字段。

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

那么，我在这里做错了什么。是啊！这是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
  });
};

只是为了让自己清楚。在单击提交之前，我需要这些值。未提交。

【问题讨论】：

你在哪里使用createform函数？
在组件外部使用它。像这样@Form.create()
嗯，我正在查看 redux 方式，您使用 onFieldsChange 而不是 onChange 属性。但由于您需要访问“this”，它可能不适用于您的情况
你试过去掉这行吗：this.props.form.setFieldsValue({ qcategoryid: value }); ?
是的。那也没用

标签： javascript reactjs forms antd

【解决方案1】：

我意识到这已经很晚了，但我认为这可能是 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

【讨论】：

【解决方案2】：

试试这个：

<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 helper 改成 Select，这样就不会和 antd 的自然行为混淆，而是获取 value 和 state 上的变化

我根据他们网站上的注册表单的代码得出了这个答案。具体来说就是handleWebsiteChange函数

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

【讨论】：

这里有几个问题，来自 Form.Item 的文档： - 你不应该在每个表单控件上使用 onChange 来收集数据（使用 Form 的 onValuesChange），但你仍然可以听 onChange。 - 您不能通过 value 或 defaultValue 属性为每个表单控件设置值，您应该使用 Form 的 initialValues 设置默认值。请注意，setState 不能动态更新 initialValues，您应该在这种情况下使用 setFieldsValue。 - 您不应手动调用 setState，请使用 form.setFieldsValue 以编程方式更改值。 ant.design/components/form/#Form.Item
@lacy 这个帖子是 2018 年的，所以可能是关于 antd v3 甚至 v2 的。我想他们同时改变了他们做一些事情的方式并改进了他们的文档。如果这个问题在当前的 antd 版本中仍然是一个相关问题，也许你可以写一个更新的答案？

【解决方案3】：

快速响应，希望快速解决。根据文档 (https://ant.design/components/select/)，您可能希望使用 onSelect/onDeselect 处理程序，而不是使用 onChange：

<Select onSelect={handleCategoryChange} .../>

我还发现 SELECT 和其他输入组件，由于它们的自定义 html 特性操作不同，因此在我的表单中，我经常将它们创建为用于更改文本/隐藏输入以实现的虚拟字段复杂形式的期望行为。

要么我做错了，要么 ANT 方式有点烦人。

希望这会有所帮助。

【讨论】：

没有。这种方式只有在你没有在表单中使用它时才有效。但是当你在表单中使用它时，这不起作用。
是什么阻止您在表单中使用它？把它放在一个表格中会给你想要的效果吗？
它在表单中不是这样工作的。这就是我要说的。它在表单中的行为不同