博客

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

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身上*/}
        	 <Form ref={this.formRef}>
                <Form.Item name="example">
                   <Input />
                </Form.Item>
             </Form>
        }
    }
}
export default BaseInfo

在需要的地方进行使用：

this.formRef.current.setFieldsValue({
       example: ‘从后台返回要显示的值’,		
})