51工具盒子
vue每日Bug：解决"Antd中Form表单的onChange事件中执行setFieldsValue不生效"的问题。
如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。
{#_lab2_0_0}
原因
Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。
{#_lab2_0_1}
解决方案
-
使用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的一个属性。
{#_label1}
antd Design Form setFieldsValue的使用 {#heading-3}
最近项目使用的是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
{#_lab2_1_2}
解决 {#heading-4}
antd4.x 中使用setFieldsValue 是通过ref来进行操作，如下所示：
class Index extends Component{
constructor(props) {
super(props)
this.state = { }
}
// 创建一个ref
formRef = React.createRef()
render(){
return{
{/* 绑定到Form身上*/}
<Form ref={this.formRef}>
<Form.Item name="example">
<Input />
</Form.Item>
</Form>
}
}
}
export default BaseInfo
在需要的地方进行使用：
// example 为Form.Item中的name
this.formRef.current.setFieldsValue({
example: ‘从后台返回要显示的值',
})
总结
官方文档中都是有相关说明的，setFieldsValue 的使用我是在文档中的一个例子中找到的，碰到问题的时候还是要多阅读文档。
