Quando a caixa de entrada react-ant-design é inserida, o caractere pinyin aciona o processamento do evento onChange

1. Quando fazemos a caixa de entrada, geralmente limitamos o número de caracteres, mas descobriremos que, ao inserir pinyin, os caracteres pinyin sempre serão acionados onchange事, o que também invalidará nosso julgamento.

2. O método a seguir também foi pesquisado por mim, mas a cena é mais complicada. Meu cenário de aplicativo está sendo processado em componentes não controlados.

Diretamente no Input中加入handleCompositionevento, este evento contém três estados ：start-update-end；correspondentes à entrada inicial, entrada e entrada final, respectivamente. Então, movi meu julgamento para este evento para julgamento.

3. Para cenários específicos, você pode pesquisar respostas mais detalhadas por conta própria. Compartilhe meu código fragmentado aqui

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