When the react-ant-design input box is input, the pinyin character triggers onChange event processing

1. When we make the input box, we generally limit the number of characters, but we will find that when inputting pinyin, the pinyin characters will always trigger onchange事, which will also invalidate our judgment.

2. The following method was also searched by myself, but the scene is more complicated. My application scenario is processing under uncontrolled components.

Directly in the Input中加入handleCompositionevent, this event contains three states ：start-update-end；corresponding to start input, inputting, and end input respectively. So I moved my judgment into this event for judgment.

3. For specific scenarios, you can search for more detailed answers by yourself. Share my fragmented code here

  // 处理将字符算入字数
  handleComposition = (e) => {
    
    
      // type对应三种类型
    if (e.type === 'compositionend' && e.target.value.length > 10) {
    
    
      message.info("输入内容已达上限~,请重新输入");
    }
  }
  
      <Input
          style={
    
    {
    
     width: 150, textAlign: 'center' }}
          value={
    
    sectionName}
          disabled={
    
    state === 1}
          onCompositionStart={
    
    this.handleComposition}
          onCompositionUpdate={
    
    this.handleComposition}
          onCompositionEnd={
    
    this.handleComposition}
          onChange={
    
    this.handleChange.bind(this, coordinates, 'itemName')}
        />