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

Question

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

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

Answer 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

Answer 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 助手更改为 Select，因此它不会与 antd 的自然行为相混淆，而是获取值并更改状态

我已经根据他们网站上注册表单的代码来回答这个问题。 具体来说，handleWebsiteChange 函数

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

Answer 3

截至 2022 年 5 月 22 日，这可能有助于 Ant Design 形成 API

这是在 v4.20 中添加的

const Demo = () => {
  const [form] = Form.useForm();
  const userName = Form.useWatch('username', form);

  const { data: options } = useSWR(`/api/user/${userName}`, fetcher);

  return (
    <Form form={form}>
      <Form.Item name="username">
        <AutoComplete options={options} />
      </Form.Item>
    </Form>
  );
};

Answer 4

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

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

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

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

希望这可以帮助。