React？Hooks？实现的中文输入组件（react绑定this）学会了吗

文章摘要

这篇文章介绍了如何使用React组件实现组合输入功能。文章详细讲解了如何通过`useRef`和`useEvent`等 hooks 创建一个支持多平台中文输入的组件。组件通过`handleStart`、`handleInput`和`handleEnd`三个函数实现状态管理，其中`handleInput`函数根据组合输入状态切换，并调用`onInput`处理输入内容。文章还提到了组件的编写思路和实际应用场景，能够帮助开发者快速实现类似功能。

import { useRef, useState } from “react”;
export function ChineseInput(params){
const { onInput=()=> {} }=params;
const lockRef=useRef(false);
// preview 用于预览，不然都不知道自己打的什么内容
const [preview, setPreview]=useState(value);
// 进入组合输入状态
const handleStart=()=> {
lockRef.current=true
};
const handleInput=event=> {
// 不管状态如何，总是需要预览的
setPreview(event.target.value);
// 处于组合输入状态，不予处理
if(lockRef.current) return;
// 非组合输入状态，触发 onInput
onInput(event);
};
// 选字结束，触发 onInput
const handleEnd=event=> {
setPreview(event.target.value);
lockRef.current=false;
onInput(event);
};
return (
<input
{…params}
onCompositionEnd={handleEnd}
onCompositionStart={handleStart}
onInput={handleInput}
/>
)
}