跳到主要内容

react-input

2023年09月14日
柏拉文
越努力，越幸运

一、中文输入​

问题描述:

在使用 React 绑定 input 输入框的 onChange 方法时，如果使用中文输入法（或者其他输入法），会出现一个问题：还在输入拼音的时候，onChange 方法已经触发了，如下，即输入过程就已经触发了多次 onChange 方法。如果 onChange 方法有较为复杂的逻辑，就可能会带来一些用户体验或者逻辑的问题。

解决方案:

通过使用 compositionEvent 事件控制中文输入标识, 根据中文输入标识决定是否触发 onChange 。具体为: 通过监听输入法开始输入到结束的事件，即是去监听compositionstart和compositionend方法，通过设置一个变量，在两个方法里面设置 true/false，来判断是否处在中文输入拼音这个过程当中，如果是，则不触发 onChange 后续事件。

兼容处理:

  • 谷歌浏览器: compositionstart -> onChange -> compositionend, onChange 事件先于 compositionend 事件触发, 因此我们需要针对谷歌浏览器的 compositionend 结束后手动调用 onChange 处理函数。

  • 其他浏览器: compositionstart -> compositionend -> onChange

具体实现

import { useState } from 'react';
import {Input} from './components/Input/input';

function App() {
  const [value, setValue] = useState('');
  const [error,setError]  = useState('');

  const handleInputOnChange = (e: string, len: number) => {
    setValue(e);
    if(len >= 20){
      setError("xx 超过20个字符");
    }
  };

  const handleInputOnBlur = () => {
    if(value.length === 0){ 
      setError("请输入xx");
    }
  }

  return (
    <div style={{width: '300px'}}>
      <Input
        limit={20}
        value={value}
        error={error}
        limitType="character"
        onBlur={handleInputOnBlur}
        onChange={handleInputOnChange}
      />
    </div>
  );
}

export default App;