ant design 4版本form表单默认值

有两种方法,方法一
这个方法有一个小缺陷,只有initialValue是自己写死的值,表单上才会显示,如果是我们请求来的数据,如例子中的initialValue={city}就不会显示

 

方法二、这个方法也有点小缺陷,
写死的值会显示,请求的值不会显示,但是ant design说了只有初始化或重置的时候才有效所以我们得让页面打开的时候,重置一下

const Demo = () => (
  
);

重置,最好把这个重置放在请求成功里面去,因为你不知道到底页面什么时候加载完成

 useEffect(() => {
    ....
    success: (data) => {
                SetCity(data.city)
                setTimeout(() => {
                    onReset()
                }, 0)

            }

    }, [])
    function onReset() {
        form.resetFields();
    };

方法三、最常用的方法,上面有点野路子。先绑定form表单,然后调用 form.setFieldsValue({ 默认值})

 const [form] = Form.useForm();
 useEffect(() => {
        form.setFieldsValue({ ...messageData })
    }, [])

 

也可以直接在Form上设置initialValues

 

你可能感兴趣的:(ant design 4版本form表单默认值)