react-hook-form 中 antd 组件Input 输入按字节限制长度（汉字占2个字节，字母1个字节）_antd input oninput

“文案上限为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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在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}
                  />
       }}
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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