antd项目中input框的value值不能被修改，form.setFieldsValue 来动态改变表单值

目录

一、问题描述

1.1、环境

1.2、问题展示

1.3、问题代码展示

1.4、控制台效果

1.5、解释

二、官网解释

官网链接https://ant.design/components/form-cn

三、解决方案

3.1、修改版部分代码

3.2、修改版结果

3.3、思路

一、问题描述

1.1、环境

项目环境：react+antd

组件环境：Modal, Form, Input, Button, InputNumber, Radio

1.2、问题展示

广告请求权重只有在所属页面选择为启动页是是非禁用的，在其他页面都是禁用的状态而且广告请求权重默认为100

现在有一个问题就是：启动页配置了权重大小，切换到其他页面权重值并没有改变到100默认值

1.3、问题代码展示

// showRateValue用于存值,用于响应式修改值const [showRateValue, setShowRateValue] = useState(100);// pageType所属页面的值,用于判断是否是启动页const [pageType, setPageType] = useState(0); console.log(value)}>// 所属页面,当页面radio的值改变时,修改showRateValue的值 {setPageType(e.target.value);setShowRateValue(100)console.log("showRateValue", showRateValue)}}>首页列表页控制页个人中心引导页启动页// 广告请求权重,值绑定为showRateValue1.4、控制台效果
1.5、解释
 点击启动页修改权重然后回到其他页面，发现showRateValue数值并没有改变，还是87，但是，打印出来缺是改变为100了的
二、官网解释
官网链接https://ant.design/components/form-cn
被设置了name属性的Form.Item包装的控件，表单控件会自动添加value（或valuePropName指定的其他属性）onChange（或trigger指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
你不再需要也不应该用onChange来做数据收集同步（你可以使用 Form 的onValuesChange），但还是可以继续监听onChange事件。
你不能用控件的value或defaultValue等属性来设置表单域的值，默认值可以用 Form 里的initialValues来设置。注意initialValues不能被setState动态更新，你需要用setFieldsValue来更新。
你不应该用setState，可以使用form.setFieldsValue来动态改变表单值。
三、解决方案
3.1、修改版部分代码
 
// 引入使用formconst [form] = Form.useForm(); console.log(value)}>// 使用form.setFieldsValue改变表单里面的值 {setPageType(e.target.value);form.setFieldsValue({showRate: '100',});}}>首页列表页控制页个人中心引导页启动页//这里的initialValue,以及inputNumber中的value并不需要绑定响应式的值,没有用3.2、修改版结果
切换就立马改变
3.3、思路
a）引入 const [form] = Form.useForm();
b）在Form中加入：form={form}
c）使用form.setFieldsValue对数据进行修改