Antd中Form表单的onChange事件中执行setFieldsValue不生效

最新推荐文章于 2025-11-10 16:16:58 发布

原创最新推荐文章于 2025-11-10 16:16:58 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

antd 专栏收录该内容

4 篇文章

订阅专栏

在Ant Design的Form组件中，直接在onChange事件中设置setFieldsValue会导致失效，因为Form组件内部的setFieldsValue会覆盖手动设置。解决方法包括使用setTimeout、getValueFromEvent或normalize选项来更新表单值。

如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。原因是因为：Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。解决方案：

1. 使用setTimeout延时。此方案不推荐

2. 使用getValueFromEvent. 是当onChange的时候，更改form表单的值的情景下使用

<FormItem label="路由节点" {...nodelayout}>
     {getFieldDecorator(`node`, {
        rules: [
           {
              required: true,
              message: '选择要指定的路由节点',
            }],
        getValueFromEvent: (val: any) => {
            let nodesArr = [] as any;
             for (let item of transferList) {
                 for (let j of val) {
                    if ((item as any).id === j) {
                      nodesArr.push(item);
                    }
                  }
             }
             return nodesArr;
        }
     })(
    <Transfer
       operations={['>>', '<<']}
       dataSource={transferList}
       filterOption={(inputValue: any, option: any) =>
          option.value.indexOf(inputValue) > -1
       }
       showSearch
       lazy={false}
       targetKeys={targetKeys}
       onChange={transferHandleChange}
       onSearch={transferHandleSearch}
       render={item => item.value}
    />,
)}
</FormItem>

3. 如果你只想简单的更改表单的值setFieldsValue，而不是在onChange的时候触发。那么可以使用normalize. 与上述的getValueFromEvent类似，都是option的一个属性。