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