React 中 input 组件无法输入中文的问题与解决方案

@GuoYongfeng 2018-11-20 09:30:13发表于 iuap-design/blog

原因分析

在 input 的 onChange 中监听到 input 中输入的值的时候进行了正则的判断,而输入中文的拼音时候也会走onChange 这个方法,到这个方法做正则的替换时候不知道现在输入的是拼音,直接当成字母来处理了,就出现了输入拼音时候还没有选择汉字拼音就直接转化成了字母。

方案分析

利用 compositionstart & compositionend 解决:

  • compositionstart:在输入中文或者语音等需要等待一连串的输入的操作之前,compositionstart 事件会触发。
  • compositionend:在输入中文或者语音等完毕或取消时,compositionend 事件会触发。

方案一

class Value extends React.Component {
   constructor(props) {
      super(props)
      this.inputRef = ''
      this.flag = true
   }

   onChange = () => {  

   }

   render() {
    const isChangeable = isEditable && isTypeable
  
    return (
        <input
            ref={(c) => { this.inputRef = c }}
            style={mergedValueStyle}
            styleName="input"
            type="text"
            value={value || ''}
            placeholder={placeholder}
            onCompositionStart={() => { this.flag = false }}
            onCompositionEnd={() => { this.flag = true }}
            onChange={() => setTimeout(() => {
                if (this.flag && isChangeable) {
                    onChange(this.inputRef.value)
                }
            }, 100)}
        />

    )
 }
}

方案二

方案三