antd4.x 使用setfieldsvalue动态修改表单值

最新推荐文章于 2023-11-21 21:39:47 发布

I-DONT-SLEEP

最新推荐文章于 2023-11-21 21:39:47 发布

阅读量2.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/csu150208/article/details/117575029

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单的默认值可以用 Form 里的 initialValues 来设置。但是 initialValues 不能被 setState 动态更新，因此需要用 setFieldsValue 来更新。

1.创建ref实例

//创建ref实例
export default class UpdateForm extends Component {
    formRef = React.createRef()
}

2.将ref实例绑定到表单

render() {
        return (
            <Form ref={this.formRef}>
                <Form.Item name='category'>
                    <Input placeholder='请输入分类名称'/>
                </Form.Item>
            </Form>
        )
    }

3.使用setFieldsValue修改某个特定Form.Item的值（由于我要在初次渲染后立即修改，所以写在了componentDidMount生命周期函数中）

componentDidMount() {
        const categoryName = this.props.category.name
        this.formRef.current.setFieldsValue({
            category: categoryName
        })
    }