Javascript 如何在antd中获取FormItem更改时的字段值

我对antd的状态很不满意。 我在表单中有一个选择字段，我想在更改后从中获取值，但不知何故无法使其正常工作

假设这是我想要其值的项目

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

我只是想说清楚。 在单击提交之前，我需要这些值。

---

不在提交时。

快速响应，希望能快速解决。根据文档（），您可能希望使用onSelect/onDeselect处理程序，而不是使用onChange：

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

要么我做错了什么，要么蚂蚁的方式有点烦人

希望这有帮助。

试试这个：

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

基本上，将onChange从getFieldDecorator助手更改为Select，这样它就不会干扰antd的自然行为，而是在状态上获取值和更改

我是根据他们网站上登记表的代码来回答的。具体来说，handleWebsiteChange函数

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

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

---

我意识到这太晚了，但我想这可能是OP想要的：

要动态设置窗体上的字段，例如通过回调在子窗体中设置字段，可以使用

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

---

在父级定义的

handleSelect

方法中，您从选定值的子级调用该方法。如果您不想传递错误字段

否，您也可以使用

setFieldsValue

。只有在表单中未使用该字段时，此方法才有效。但是当你在表单中使用它时，这就不起作用了。是什么阻止你在表单中使用它呢？把它放在一个表格里会给你想要的效果吗？它在表格里不是这样工作的。我就是这么说的。它在表单内部的行为不同。您在哪里使用createform函数？在组件外部使用它。像这个@Form.create（）嗯，我在看redux方法，在那里你使用onfilschange而不是onChange属性。但是，由于您需要访问“this”，它可能不适用于您的案例，您是否尝试删除这一行：this.props.form.setFieldsValue（{qcategoryid:value}）？对那也不行

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

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