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

这是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，并且能够获取所需的字段。

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

所以，我在这里做错了什么。是的！这是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

也许这将有助于Ant Design 从 2022 年 5 月 22 日起形成 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 2

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

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

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

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

希望这可以帮助。