react-hook-form 中 antd 组件Input 输入按字节限制长度(汉字占2个字节,字母1个字节)

“文案上限为20个字符(10个汉字)”产品需求一个小括号,开发实现一下子复杂了很多。
input和antd中Input组件的maxLength只统计字符长度,中英文标点都算一个长度,所以为了实现这个需求,只能在onInput中监听输入的事件,判断输入的内容中汉字的个数和非汉字的个数。

    const lengthVerification = (v, maxLength, data) => {
        let value = v.target.value;//antd组件中获取当前输入的值
        let len = 0;
        let result = "";
        for (let i = 0; i < value.length; i++) {
            if (value.charCodeAt(i) > 127 || value.charCodeAt(i) == 94) {
                len += 2;
                result += value.charAt(i);
            } else {
                len++;
                result += value.charAt(i);
            }
            if (len >= maxLength) {
                data.onChange(result)//react hook form中更新表单中的数据
                return result
            }
        }
        data.onChange(value)
        return value;
    }

在react hook form中,直接在controller的属性中监听onInput是没有作用的,需要在render中监听:

<Controller
     key={row.lotteryTitle||props.name}
     name={`lotterySkuList[${index}].lotteryTitle`}
     control={props.control}
     id={`lotterySkuList[${index}].lotteryTitle`}
     defaultValue={row.lotteryTitle||'1元支持,赢众筹新品'}
     rules={{
          required: props.required ? '请录入抽奖模块主标题!' : '',
     }}
                       
     render={(data)=>{
           return<TextArea 
                      onInput={(value)=>lengthVerification(value,20,data)} 
                      value={data.value}  
                      onPressEnter={(e)=>e.preventDefault()}
                      placeholder='主标题文案上限为20个字符(10个汉字)'
                      disabled={props.disabled}
                      key={row.lotteryTitle||props.name}
                  />
       }}
/>

这里有个小知识点,因为想用textarea这种可换行显示的大输入框,但是又不想让用户可以在textarea里回车换行,可以加入onPressEnter={(e)=>e.preventDefault()},这样输入的时候和input就一样了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值