javascript 如何在antd中获取FormItem更改的字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51423739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get field value on change for FormItem in antd
提问by faraz
I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly.
我对 antd 的形式感到很困难。我在这个表单中有这个选择字段，我想从它 onChange 获取值，但不知何故不能让它正常工作。
say this is the item for which I want the values
说这是我想要值的项目
<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>
this is the 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>
));
}
I want both the name of the category and the id so I created a handleCategoryChange which gets called onChange and I am able to get the fields I want.
我想要类别的名称和 id，所以我创建了一个 handleCategoryChange，它被称为 onChange 并且我能够获得我想要的字段。
But, it seems that now, I have to click twice on the field to properly select it. If I click it just once then it does show up in the console. but the field on the form still remains empty. when I click it again, then the field shows up in the form too.
但是，现在看来，我必须在该字段上单击两次才能正确选择它。如果我只单击它一次，它就会显示在控制台中。但表单上的字段仍然是空的。当我再次单击它时，该字段也会显示在表单中。
So, what am I doing wrong here. Ah,yes! Here's the handleCategoryChange function
那么，我在这里做错了什么。没错！这是 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
});
};
Just to make myself clear. I need those values before I click submit. not on submit.
只是为了让自己清楚。在单击提交之前，我需要这些值。不提交。
回答by iagowp
Try this:
试试这个：
<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>
And on the handleCategoryChange function
并在 handleCategoryChange 函数上
handleCategoryChange = (value, e) => {
this.setState({
categorySelected: value,
categoryname: e.props.name
});
};
Basically, changing the onChange from the getFieldDecorator helper to the Select, so it doesn't mess with antd's natural behavior, but gets the value and change on state
基本上，将 onChange 从 getFieldDecorator 助手更改为 Select，这样它就不会干扰 antd 的自然行为，而是获取值并更改状态
I've based this answer on the code to the registration form on their website. Specifically, the handleWebsiteChange function
我根据他们网站上注册表的代码给出了这个答案。具体来说，handleWebsiteChange 函数
https://ant.design/components/form/#components-form-demo-register
https://ant.design/components/form/#components-form-demo-register
回答by mburke05
I realize this is super late, but I think this might be what OP was looking for:
我意识到这太晚了，但我认为这可能是 OP 正在寻找的：
To set fields on a form dynamically, e.g. in a child via a callback, you could use
要动态设置表单上的字段，例如通过回调在子表单中，您可以使用
this.props.form.setFields({
user: {
value: values.user,
errors: [new Error('forbid ha')],
},
});
in a parent defined handleSelectmethod you called from the child on a selected value. you can alternatively use setFieldsValueif you dont want to pass an error field
在父定义的handleSelect方法中，您从子级调用选定的值。setFieldsValue如果您不想传递错误字段，您也可以使用
回答by Vincro
A quick response, and hopefully a quick solution. Rather than using onChange you may want to use onSelect/onDeselect handlers, per the documentation (https://ant.design/components/select/):
快速响应，并希望快速解决。根据文档（https://ant.design/components/select/），您可能想要使用 onSelect/onDeselect 处理程序，而不是使用 onChange ：
<Select onSelect={handleCategoryChange} .../>
I have found also that SELECT and other input components, due to their custom html nature operate differently, and so in my forms, I have often created them as dummy fields that are using to alter text/hidden inputs in order to achieve the desired behaviours in complex forms.
我还发现 SELECT 和其他输入组件，由于它们的自定义 html 性质不同，因此在我的表单中，我经常将它们创建为用于更改文本/隐藏输入以实现所需行为的虚拟字段以复杂的形式。
Either I am doing something wrong, or the ANT way is mildly annoying.
要么我做错了什么，要么 ANT 方式有点烦人。
Hope this helps.
希望这可以帮助。
