Cuando se ingresa el cuadro de entrada react-ant-design, el carácter pinyin activa el procesamiento de eventos onChange

1. Cuando hacemos el cuadro de entrada, generalmente limitamos el número de caracteres, pero encontraremos que al ingresar pinyin, los caracteres pinyin siempre se dispararán onchange事, lo que también invalidará nuestro juicio.

2. El siguiente método también lo busqué yo mismo, pero la escena es más complicada. Mi escenario de aplicación se está procesando bajo componentes no controlados.

Directamente en el Input中加入handleCompositionevento, este evento contiene tres estados ：start-update-end；correspondientes a la entrada inicial, entrada y entrada final, respectivamente. Así que moví mi juicio a este evento para juzgarlo.

3. Para escenarios específicos, puede buscar respuestas más detalladas usted mismo. Comparta mi código fragmentado aquí

  // 处理将字符算入字数
  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')}
        />