javascript - 如何在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所以我创建了一个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 form API as of 22nd of May 2022

这是在 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>
  );
};