ant-design RangePicker 无法变成受控 且 onCalendarChange 无法正确执行 form.setFieldValue

z9gpfhce  于 22天前  发布在  其他
关注(0)|答案(6)|浏览(17)

Steps to reproduce

将RangePicker包裹在form.item中 (并且被条件控制显隐), 添加value属性, disabled为[false, true], 但是无法受控

What is expected?

应该被 validityDateValue 这个state控制, validityDateValue的值回显在RangePicker组件上

What is actually happening?

开始时间确实, 且结束时间始终是 今天, state的值没有被回显 (在上述codeSandbox已经复现)
并且 onCalendarChange中无法实现form.setFieldValue()赋值
| Environment | Info |
| ------------ | ------------ |
| antd | 4.24.15 |
| React | 17 |
| System | mac monterey 12.6 |
| Browser | chrome |

xhv8bpkk

xhv8bpkk1#

  1. disabled 是会被formItem影响
  2. state的值没有被回显 是因为设置的是defaultValue,受控需要在onValueChange或者useeffect 里依赖state 使用form对{[name]:value}赋值
myzjeezk

myzjeezk2#

  1. disabled 是会被formItem影响
  2. state的值没有被回显 是因为设置的是defaultValue,受控需要在onValueChange或者useeffect 里依赖state 使用form对{[name]:value}赋值

貌似在onCalendarChange中使用form.setFieldValue(‘validityDate’, xxx) 也赋值不了, 也是因为form.item 有了initialValue的缘故么

hc2pp10m

hc2pp10m3#

  1. disabled 是会被formItem影响
  2. state的值没有被回显 是因为设置的是defaultValue,受控需要在onValueChange或者useeffect 里依赖state 使用form对{[name]:value}赋值


我这么使用也是无效的, 去掉disabled=[false, true]属性就可以

jecbmhm3

jecbmhm34#

我不太理解onCalendarChange这个方法的调用时机,我一直无法触发它,以及你想要实现的效果看起来是只能选择开始时间自动设置结束时间为三年后,

onValuesChange={(params) => {
        const key = Object.keys(params)?.[0];
        if ("validityDate" === key) {
          form.setFieldValue("validityDate", [
            params.validityDate[0],
            moment(params.validityDate[0]).add(3, "years"),
          ]);
        }
      }}

在form上设置这个方法 可以帮到你吗

drnojrws

drnojrws5#

我不太理解onCalendarChange这个方法的调用时机,我一直无法触发它,以及你想要实现的效果看起来是只能选择开始时间自动设置结束时间为三年后,

onValuesChange={(params) => {
        const key = Object.keys(params)?.[0];
        if ("validityDate" === key) {
          form.setFieldValue("validityDate", [
            params.validityDate[0],
            moment(params.validityDate[0]).add(3, "years"),
          ]);
        }
      }}

在form上设置这个方法 可以帮到你吗
我尝试尝试

t3psigkw

t3psigkw6#

抱歉 4.x 已经过了维护期,不再提供支持了
https://ant-design.antgroup.com/docs/blog/v4-ood-cn

相关问题