Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决

本篇内容主要讲解“Antd中FORM表单的onChange事件中执行setFieldsValue不生效怎么解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决”吧!

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

如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。

原因是因为

Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。

解决方案

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

使用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>

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

antd Design Form setFieldsValue的使用

最近项目使用的是antd Design 4.x 版本，碰到个需要加载后端数据并展示，并且用户可以进行修改的需求，前端采用的是antd的Form表单来实现

组件加载的时候向后端请求数据

componentDidMount() {        gainCountry().then(res => {            // 这里进行数据请求            ......        })    }

form表单要回填数据一般会想到的是initialValues，但是这是适用于初始化值的时候，官方文档的原话：“initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新”。

搜索一番setFieldsValue的使用，基本上都是：this.props.form.setFieldsValue, props自带form，试用之后发现报错，this.props下没有form，这个好像只适用于antd 3.x

解决

antd4.x 中使用setFieldsValue 是通过ref来进行操作，如下所示：

class Index extends Component{    constructor(props) {        super(props)        this.state = { }    }    // 创建一个ref    formRef = React.createRef()    render(){        return{             {}             <Form ref={this.formRef}>                <Form.Item name="example">                   <Input />                </Form.Item>             </Form>        }    }}export default BaseInfo

在需要的地方进行使用：

// example 为Form.Item中的namethis.formRef.current.setFieldsValue({       example: ‘从后台返回要显示的值',                })

到此，相信大家对“Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！