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

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

请您参考如下方法:

也许这会有所帮助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> 
  ); 
};