compositionstart and compositionend 解决输入法输入问题

composition.tsx

import * as React from 'react'
import styled from 'styled-components'
import { observable } from 'mobx'
import { Tooltip, Input, message } from 'antd'
import { Icon } from '@/components'
import { observer } from 'mobx-react'

// 匹配非字母数字下划线空格中文的字符
const reg = /[^a-zA-Z0-9_\s\u4e00-\u9fa5]/g

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  align-items: center;

  .comment-text {
    display: inline-block;
    overflow: hidden;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
  }

  .icon {
    margin-left: 10px;
    cursor: pointer;
    color: #3a8dff;
  }
`

interface IProps {
  comment: string
  onSave?: (comment: string) => any
}

@observer
export default class CommentCell extends React.Component<IProps> {
  @observable editing = false
  @observable value = this.props.comment

  // 修复中文输入软件，组合输入词汇时的 issue
  isOnComposition = null
  emittedInput = null

  componentDidUpdate(prevProps) {
    if (this.props.comment !== prevProps.comment) {
      this.value = this.props.comment
    }
  }

  onEdit = (e: MouseEvent) => {
    e.stopPropagation()
    this.editing = true
  }

  onCancel = (e: MouseEvent) => {
    e.stopPropagation()
    this.editing = false
    // reset
    this.value = this.props.comment
  }

  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let userInputValue = e.target.value
    this.value = userInputValue

    if (!this.isOnComposition) {
      this.value = this.value.replace(reg, '')
      this.emittedInput = true
    } else {
      this.emittedInput = false
    }
  }

  onComposition = event => {
    if (event.type === 'compositionstart') {
      this.isOnComposition = true
      this.emittedInput = false
    } else if (event.type === 'compositionend') {
      this.isOnComposition = false
      if (!this.emittedInput) {
        this.value = this.value.replace(reg, '')
      }
    }
  }

  onSave = async (e: MouseEvent) => {
    e.stopPropagation()
    this.editing = false
    const res = await this.props.onSave(this.value)

    if (res && res.errorCode === 0) {
      message.success(`更新成功`)
    }
  }

  render() {
    const { comment } = this.props
    return this.editing ? (
      <Wrapper>
        <Input
          autoFocus
          size='small'
          value={this.value}
          style={{ width: 180 }}
          onChange={this.onChange}
          onCompositionStart={this.onComposition}
          onCompositionEnd={this.onComposition}
          onClick={e => e.stopPropagation()}
        />
        <Icon type='save' tooltip='保存' onClick={this.onSave} />
        <Icon type='cancel' tooltip='取消' onClick={this.onCancel} />
        <Tooltip
          placement='top'
          title='注释只能包含中文，数字，字母，空格和下划线。'>
          <Icon type='question-mark' tooltip='提示' />
        </Tooltip>
      </Wrapper>
    ) : (
      <Wrapper>
        <Tooltip placement='top' title={comment}>
          <p className='comment-text'>{comment}</p>
        </Tooltip>
        <Icon type='edit-input' onClick={this.onEdit} />
      </Wrapper>
    )
  }
}