react input 输入框 onchange事件 输入中文 拼音和汉字同时在输入框里

react input 输入框 onchange事件 输入中文 拼音和汉字同时在输入框里

原因： 当你正常使用setState(name: e.target.value),这样中英文都不会有问题，但当你进行数据处理的时候 比如： setState(name: e.target.value.replace(/[^0-9a-zA-Zu4e00-u9fa5]/g, '')), 也就是想输入的时候就剔除数字汉字字母以外的内容，这时候输入框里面就是 “nninihnihao你好”，这样子的。

解决办法

input 需要监听三个事件，onCompositionStart，onCompositionUpdate，onCompositionEnd，分别是输入开始时，输入进行中，和输入完成时。

给标签加上ref。

在输入结束后去修改input的值。

注意：清除键、粘贴、英文字母和数字是不会触发这几个事件的。前2个事件都在onChange之前触发，onCompositionEnd是在onChange之后触发。所以要输入事件和onchange事件结合使用

react

这时候不给给绑定value了，给一个defaultValue。

let isOnComposition = false;
export default class App extends React.Component {
  state = {
    teacherName: '',
  }
  
  handleComposition(e) {
    console.log('type', e.type)
    if (e.type === 'compositionend') {
      isOnComposition = false
      if (!isOnComposition) {
        this.onTeacherNameChange(e);
      }
    } else {
      isOnComposition = true
    }
  }

  onTeacherNameChange = (e) => {
    if (!isOnComposition) {
      let val = e.target.value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]/g, '')
      this.refs.teacherName.value = val
      this.setState({ teacherName: val })
    }
  }
  
  render() {
    let { teacherName } = this.state
    return (
        <input ref="teacherName" type="text" defaultValue={teacherName} placeholder='真实姓名'
                onChange={this.onTeacherNameChange}
                onCompositionStart={this.handleComposition.bind(this)}
                onCompositionUpdate={this.handleComposition.bind(this)}
                onCompositionEnd={this.handleComposition.bind(this)}
              />
    )
  }
  
}