Ant-Design 表单在使用 onChange 时验证 returns 旧值

Question

我正在使用这样的 ant-design 表单项：

 {getFieldDecorator('city', {initialValue:'a', rules: [{required:true,message:' '}]})(
     <select onChange={onChange}  className="form-control">
     <option  value='a' >a</option>
     <option  value='b' >b</option>
     </select>
                            }



and here is my onchange function:




onChange=()=>{
 form.validateFields((err, values) => {
            console.log(values)



        })
}

问题是，在将值更改为 'b' 时，我仍然在 onChange 函数 (console.log(values)) 中得到 'a' 作为表单值。将值从 'b' 更改为 'a' 时也会发生这种情况。

Answer 1

您将即时 onChange 行为与验证混为一谈。如果您正在寻找可立即采取行动的下拉菜单，则不需要 <Form>，只需单独使用 <Select>。

如果你想要一个带有提交功能的正确表单，你应该 而不是 在 <Select> 上使用 onChange，这是由蚂蚁。然后，当您在表单提交时调用 form.validateFields 时，您将获得正确的值。

最后，如果您想要在<Form>中使用字段验证立即采取行动，请使用onFieldsChange选项而不是单独的小部件onChange.

Ant-Design 表单在使用 onChange 时验证 returns 旧值

Ant-Design form validate returns old values while using onChange

javascript

reactjs

antd