Question

我正在使用蚂蚁设计而且我遇到了一个无线电组问题。在我看来，当单击单选按钮时，但在设置该单选按钮的值之前，RadioGroup上的onChange处理程序将触发。

以下是一些示例代码

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log('field value', getFieldValue(name)); // previous value, not changed value.
};

const component =
getFieldDecorator &&
getFieldDecorator(name, {
  initialValue: value,
  rules: formatValidations(validations)
})(
  <RadioGroup name={name} onChange={handleChange}>
    <Radio value={1} key={1}>1</Radio>
    <Radio value={2} key={2}>2</Radio>
    <Radio value={3} key={3}>3</Radio>
  </RadioGroup>
);

当此handleChange函数运行时，字段值错误。第一次单击无线电1时，该值未定义。然后我点击2，值为1.换句话说，onChange事件被触发，但单选按钮的值尚未设置，我只能获得先前设置的值。任何人都可以看到我的实施有什么问题吗？

此外，e.target.value是预期的更改值（它与getFieldValue值不匹配）。

由于

Answer 1

antd支持建议在onValuesChange https://github.com/ant-design/ant-design/issues/20418

中使用Form.create()

我找到了适合我的解决方法：

<Radio.Group
 onChange={(e: RadioChangeEvent) => {
   form.setFieldsValue({ yourRadioFieldNameFromGetFieldDecorator: e.target.value }, () => {
      handleChange();
   });
 }}
>

回调确保设置了字段值。

Answer 2

如果您想立即使用该值，则应该使用e.target.value。因为当你单击收音机时，该值尚未设置（尚未设置为antd形式）。（该字段需要传递setStatus，setfeedback等）

如果你真的想使用getFieldValue，你可以执行setTime strick

setTimeout(() => console.log(this.props.form.getFieldValue('radio-group')), 0)

Antd RadioGroup onChange在设置无线电值之前触发

2 个答案: