Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决 | 您所在的位置:网站首页 › form事件属性 › Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决 |
本篇内容主要讲解“Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决”吧! Antd中Form表单的onChange事件中执行setFieldsValue不生效 如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效。 原因是因为 Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手写的setFieldsValue给覆盖掉。 解决方案 1. 使用setTimeout延时。此方案不推荐 2. 使用getValueFromEvent. 是当onChange的时候,更改form表单的值的情景下使用 {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; } })( option.value.indexOf(inputValue) > -1 } showSearch lazy={false} targetKeys={targetKeys} onChange={transferHandleChange} onSearch={transferHandleSearch} render={item => item.value} />, )}3. 如果你只想简单的更改表单的值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身上*/} } } } export default BaseInfo在需要的地方进行使用: // example 为Form.Item中的name this.formRef.current.setFieldsValue({ example: ‘从后台返回要显示的值', }) 转载请注明:Antd中Form表单的onChange事件中执行setFieldsValue不生效怎么解决 | 李雷博客 - PHP博客 |
CopyRight 2018-2019 实验室设备网 版权所有 |