how to get field value on change for FormItem in antd

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

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

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:

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

https://ant.design/components/form/#components-form-demo-register

I realize this is super late, but I think this might be what OP was looking for:

https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79

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 handleSelect method you called from the child on a selected value. you can alternatively use setFieldsValue if you dont want to pass an error field