how to get field value on change for FormItem in antd

Question

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.

Answer 1

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