我们在开发过程中可能遇到文本框输入中文，输入法键入后才进行后续操作，这里介绍一个react的翻译逻辑的实现案例：

  const inputRef = useRef<HTMLTextAreaElement>(null);
  const isComposing = useRef(false);

  useEffect(() => {
    const inputElement = inputRef.current;

    if (inputElement) {
      // 输入法开始输入
      const handleCompositionStart = () => {
        isComposing.current = true;
      };
      // 输入法输入完成
      const handleCompositionEnd = () => {
        isComposing.current = false;
      };

      inputElement.addEventListener('compositionstart', handleCompositionStart);
      inputElement.addEventListener('compositionend', handleCompositionEnd);

      return () => {
        inputElement.removeEventListener('compositionstart', handleCompositionStart);
        inputElement.removeEventListener('compositionend', handleCompositionEnd);
      };
    }
  }, []);

  const onInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setTimeout(() => {
      if (!isComposing.current) {
        const { value } = e.target;
        if (!value.trim()) {
          // 文本为空的情况
        } else {
          //输入完成后，直接翻译操作
          handleTranslate();
        }
      }
    }, 0);
  };

  return <textarea
	  onInput={onInput}
	  ref={inputRef}
	  className='autoResizingTextarea'
	  placeholder='请输入要翻译的文本'
	/>