antd4.0中Form使用initialValue

悲伤

一开始一直以为initialValue是个好东西,这样我每次编辑的时候把数据传过来就行,后来发现不得行!给大家看看
在这里插入图片描述
就离谱,后面认真看了一下文档才知道这个玩意是默认值,第一次有了之后就一直是这个。
然后我在网上看用resetFields()这个方法,每次提交或者取消之后重置一下数据,然而我试了还是不得行,会变成每次点击显示的是上一次的数据,所以后面还是老老实实看了一下form的其他方法。

贴个图
在这里插入图片描述

解决

放弃initialValue

const [form] = useForm()
form.setFielsValue(currentItem)

form带的设置数据方法。这样能够保证每次都是最新的。

随手一贴

也没啥上下文,就将就着看写法就行!!

  const { visible, onEdit, onCancel, type, currentItem, ...modalProps } = props;

  const [form] = useForm()

  useEffect(() => {
    form.setFieldsValue({ ...currentItem });
  }, [visible])

  const onOk = () => {
    form.validateFields().then((values: any) => {
      onEdit(values)
    })
  }
  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在 Ant Design 4.0 版本Form 组件的 getFieldDecorator API 已经被废弃,取而代之的是 useForm Hook,它提供了一种新的方式来实现表单项之间的依赖关系。 具体来说,您可以在 useForm Hook 使用 watch 函数来监听表单项的值,并在表单项值发生变化时触发相应的回调函数。例如: ```jsx import React from "react"; import { useForm } from "antd/lib/form/Form"; import { Input } from "antd"; function App() { const [form] = useForm(); const handleAChange = (value) => { if (value === form.getFieldValue("b")) { form.setFields([ { name: "a", errors: ["A 和 B 的值不能相同"], }, ]); } else { form.setFieldsValue({ a: value }); form.setFields([ { name: "a", errors: [], }, ]); } }; const handleBChange = (value) => { if (value === form.getFieldValue("a")) { form.setFields([ { name: "b", errors: ["A 和 B 的值不能相同"], }, ]); } else { form.setFieldsValue({ b: value }); form.setFields([ { name: "b", errors: [], }, ]); } }; const watchA = form.watch("a"); const watchB = form.watch("b"); React.useEffect(() => { if (watchA !== undefined && watchB !== undefined) { if (watchA === watchB) { handleAChange(watchA); } } }, [watchA, watchB]); React.useEffect(() => { if (watchA !== undefined && watchB !== undefined) { if (watchA === watchB) { handleBChange(watchB); } } }, [watchA, watchB]); return ( <form> <Input name="a" onChange={(e) => form.setFieldsValue({ a: e.target.value })} /> <Input name="b" onChange={(e) => form.setFieldsValue({ b: e.target.value })} /> </form> ); } ``` 在上面的例子,我们使用了 useForm Hook 来创建一个表单实例,并分别定义了 handleAChange 和 handleBChange 两个回调函数,用于处理表单项 A 和 B 的值变化。然后,我们使用 watch 函数来监听 A 和 B 的值,并在值发生变化时触发相应的回调函数。在回调函数,我们使用 setFieldsValue 函数来更新表单项的值,并使用 setFields 函数来更新表单项的错误信息。最后,我们在 useEffect Hook 监听 watchA 和 watchB 的变化,并调用相应的回调函数来处理依赖关系。 需要注意的是,由于 watch 函数只能监听具有 name 属性的表单项,因此我们需要在 Input 组件添加 name 属性来使其能够被 watch 函数监听。此外,由于 useForm Hook 返回的表单实例是一个 ref 对象,因此我们需要使用 form.getFieldValue 和 form.setFieldsValue 函数来获取和更新表单项的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值