文本输入框中文输入法输入问题

我们在开发过程中可能遇到文本框输入中文，输入法键入后才进行后续操作，这里介绍一个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 <textareaonInput={onInput}ref={inputRef}className='autoResizingTextarea'placeholder='请输入要翻译的文本'/>