InputItem的value和getFieldError一起用的时候onChange事件失效问题

文章探讨了一个在React应用中处理表单输入时遇到的问题,即不允许表单元素输入空格。作者尝试通过在onChange事件中修改state来实现,但发现事件失效。问题出在使用getFieldProps时,表单组件接管了value属性。解决方案是利用setFieldsValue在onChange事件中清理输入的空格,保持表单的正常校验功能。
摘要由CSDN通过智能技术生成

需求是表单元素不能输入空格,小小的需求我产生了大大的疑惑。

想法是把表单元素的value交给state接管,在onchange事件中修改state的值。

但是设置好了发现事件失效,根本无法输入。如下:

<InputItem
    value={address}
    disabled={isEdit}
    {...getFieldProps('address', {
        initialValue: userInfo.address || customerInfo.address || '',
        rules: [{ required: true, message: '请填写地址' }],
    })}
    clear
    placeholder="请输入地址"
    onChange={(e) => this.setState({ address: e.replace(/\s+/g, '') })}
/>

这个地方的表单校验不能去掉,并且不能改为在提交前toast.info来校验,要和别的表单元素保持一致。

经查证发现,在使用getFieldProps时,表单控件会接管value这个属性,所以即想又想当然不行啦

解决方案:表单的事件还是交给表单来做吧,使用 setFieldsValue

onChange={(e)=>  setFieldsValue({address:e.replace(/\s+/g, '')}) }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值