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

尝试一下：

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

我意识到这已经太迟了，但是我认为这可能是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 3

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

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

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

我做错了什么，或者ANT的方式有点烦人。

希望这会有所帮助。

Answer 4

您可以使用onChange事件并使用目标对象访问值，如下所示：

<Input
     onChange={this.onChange}
/>

onChange = (e) => {
  console.log(e.target.value)
}

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

4 个答案: