在React中基于ant-design，封装一个中文输入框

问题描述
antd中，input组件在触发onChange时，如果是中文输入模式，会频繁被触发，导致页面性能降低。尤其是在onChange时需要实时搜索的情况。

MyInput.jsx

import React, { useState, useEffect, useRef } from "react";
import { Input } from 'antd';

const MyInput = ({ size, value, onChange, addonBefore, placeholder, style }) => {
    const [inputValue, setInputValue] = useState(value); // 本地状态管理输入值
    const inputRef = useRef(null);
    const lockRef = useRef(false); // 锁定状态，防止在拼音输入时触发 onChange

    // 同步外部 value 到输入框
    useEffect(() => {
        setInputValue(value);
    }, [value]);

    const handleCompositionStart = () => {
        lockRef.current = true; // 开始输入时，锁定状态
    };

    const handleCompositionEnd = (e) => {
        lockRef.current = false; // 输入完成时，解锁
        setInputValue(e.target.value); // 更新最终输入值
        onChange(e.target.value); // 触发外部的 onChange
    };

    const handleChange = (e) => {
        if (!lockRef.current) { // 只有在输入完成后才触发 onChange
            const newValue = e.target.value;
            setInputValue(newValue); // 更新本地输入值
            onChange(newValue); // 更新外部状态
        } else {
            // 如果是在拼音输入阶段，防止触发 onChange
            setInputValue(e.target.value); // 更新本地输入值
        }
    };

    return (
        <Input
            style={style}
            size={size}
            ref={inputRef}
            addonBefore={addonBefore}
            placeholder={placeholder}
            value={inputValue} // 使用本地状态管理输入框内容
            onCompositionStart={handleCompositionStart}
            onCompositionEnd={handleCompositionEnd}
            onChange={handleChange} // 处理普通文本输入
        />
    );
};

export default MyInput;

用法

import React, { useState, useEffect } from 'react';
import MyInput from "@/components/Input"
import {
    SearchOutlined
} from '@ant-design/icons';


const TestInput = () => {
    const [searchFriendNickname, setSearchFriendNickname] = useState('')
    const onChangeSearchFriendNickname = (value) => {
      	console.log("输入框变化值",value)
    }
 return (
 	<>
 		<MyInput size="large" prefix={<SearchOutlined />} placeholder="搜索好友 / 群聊" style={{ borderRadius: '20px' }} value={searchFriendNickname} onChange={(e) => onChangeSearchFriendNickname(e)} />
 	</>
 )
}
export default TestInput