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)
      }}
    >
      首页
      列表页
      控制页
      个人中心
      引导页
      启动页
    
  

  // 广告请求权重,值绑定为showRateValue
  
     `${value}`}
      parser={value => parseInt(value)}
      style={{ width: '100%' }}
    />
  

         1.4、控制台效果

        1.5、解释

                  点击启动页修改权重然后回到其他页面，发现showRateValue数值并没有改变，还是87，但是，打印出来缺是改变为100了的 

二、官网解释

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

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。
2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。
3. 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

三、解决方案

        3.1、修改版部分代码

// 引入使用form
const [form] = Form.useForm();
 console.log(value)}
>
  // 使用form.setFieldsValue改变表单里面的值
  
     {
        setPageType(e.target.value);
        form.setFieldsValue({
          showRate: '100',
        });
      }}
    >
      首页
      列表页
      控制页
      个人中心
      引导页
      启动页
    
  

  //这里的initialValue,以及inputNumber中的value并不需要绑定响应式的值,没有用
  
     `${value}`}
      parser={value => parseInt(value)}
      style={{ width: '100%' }}
    />
  

        3.2、修改版结果

                切换就立马改变 

        3.3、思路

                a）引入 const [form] = Form.useForm();

                b）在Form中加入：form={form}

                c）使用form.setFieldsValue对数据进行修改