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

这篇具有很好参考价值的文章主要介绍了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、问题展示

                antd input设置值,前端,react.js

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

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

antd input设置值,前端,react.js

         1.3、问题代码展示

// showRateValue用于存值,用于响应式修改值
const [showRateValue, setShowRateValue] = useState(100);

// pageType所属页面的值,用于判断是否是启动页
const [pageType, setPageType] = useState(0);

<Form
  colon
  ref={formRef}
  {...formItemLayout}
  onFinish={onFinish}
  onFinishFailed={value => console.log(value)}
>
  // 所属页面,当页面radio的值改变时,修改showRateValue的值
  <Item
    label="所属页面"
    name="pageType"
    rules={[{ required: true, message: '所属页面不能空' }]}
  >
    <Radio.Group
      onChange={e => {
        setPageType(e.target.value);
        setShowRateValue(100)
        console.log("showRateValue", showRateValue)
      }}
    >
      <Radio value={0}>首页</Radio>
      <Radio value={1}>列表页</Radio>
      <Radio value={2}>控制页</Radio>
      <Radio value={3}>个人中心</Radio>
      <Radio value={4}>引导页</Radio>
      <Radio value={5}>启动页</Radio>
    </Radio.Group>
  </Item>

  // 广告请求权重,值绑定为showRateValue
  <Item
    label="广告请求权重"
    name="showRate"
    rules={[{ required: true, message: '请输入0~100的整数' }]}
    initialValue={showRateValue}
  >
    <InputNumber
      min={0}
      max={100}
      value={showRateValue}
      disabled={pageType == 5 ? false : true}
      formatter={value => `${value}`}
      parser={value => parseInt(value)}
      style={{ width: '100%' }}
    />
  </Item>
</Form>

         1.4、控制台效果

antd input设置值,前端,react.js

        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();
<Form
  colon
  ref={formRef}
  form={form}
  {...formItemLayout}
  onFinish={onFinish}
  onFinishFailed={value => console.log(value)}
>
  // 使用form.setFieldsValue改变表单里面的值
  <Item
    label="所属页面"
    name="pageType"
    rules={[{ required: true, message: '所属页面不能空' }]}
  >
    <Radio.Group
      onChange={e => {
        setPageType(e.target.value);
        form.setFieldsValue({
          showRate: '100',
        });
      }}
    >
      <Radio value={0}>首页</Radio>
      <Radio value={1}>列表页</Radio>
      <Radio value={2}>控制页</Radio>
      <Radio value={3}>个人中心</Radio>
      <Radio value={4}>引导页</Radio>
      <Radio value={5}>启动页</Radio>
    </Radio.Group>
  </Item>

  //这里的initialValue,以及inputNumber中的value并不需要绑定响应式的值,没有用
  <Item
    label="广告请求权重"
    name="showRate"
    rules={[{ required: true, message: '请输入0~100的整数' }]}
    initialValue={100}
  >
    <InputNumber
      min={0}
      max={100}
      disabled={pageType == 5 ? false : true}
      formatter={value => `${value}`}
      parser={value => parseInt(value)}
      style={{ width: '100%' }}
    />
  </Item>
</Form>

        3.2、修改版结果

antd input设置值,前端,react.js

                切换就立马改变 

antd input设置值,前端,react.js

        3.3、思路

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

                b)在Form中加入:form={form}

                c)使用form.setFieldsValue对数据进行修改文章来源地址https://www.toymoban.com/news/detail-609544.html

到了这里,关于antd项目中input框的value值不能被修改,form.setFieldsValue 来动态改变表单值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包