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)}
              />
    )
  }
  
}