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

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.

say this is the item for which I want the values

{...formItemLayout}

label={fieldLabels.qcategoryid}

validateStatus={categoryError ? "error" : ""}

help={categoryError || ""}

>

{getFieldDecorator("qcategoryid", {

rules: [{ required: true, message: "Please select Category!" }],

onChange: this.handleCategoryChange

})({categoryOptions})}

this is the categoryOptions

if (this.props.categories) {

categoryOptions = this.props.categories.map(item => (

key={item.categoryid}

value={item.categoryid}

name={item.categoryname}

>

{item.categoryname}

));

}

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.

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 = (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.

解决方案

Try this:

{...formItemLayout}

label={fieldLabels.qcategoryid}

validateStatus={categoryError ? "error" : ""}

help={categoryError || ""}

>

{getFieldDecorator("qcategoryid", {

rules: [{ required: true, message: "Please select Category!" }]

})({categoryOptions})}

And on the handleCategoryChange function

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

I've based this answer on the code to the registration form on their website. Specifically, the handleWebsiteChange function