Question

我正在使用像这样的ant-design Form Item：

 {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'时，我仍然将'a'作为onChange函数中的表单值（console.log（values））。这也会在将值从'b'更改为'a'时发生。

Answer 1

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

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

最后，如果您执行希望在<Form>内使用字段验证立即执行操作，请使用onFieldsChange选项而不是单个窗口小部件onChange。

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

1 个答案: