React中同时使用useRef与value导致输入框无法编辑的解决方法

你的问题核心是把输入框写成了受控组件，但外部传入的value是静态值10，每次输入时组件重渲染，输入框会被强制重置回10，导致无法编辑。要实现「允许自由编辑、仅在需要时通过ref取值、避免频繁重渲染」的需求，只需将组件改为非受控模式即可。

步骤1：修改InputField组件 #

将value属性替换为非受控组件的defaultValue，移除不需要的onChangeState（因为不需要同步状态到外部）：

type Props = {
    defaultValue?: number; // 替换原value为defaultValue
};

const InputField = forwardRef<HTMLInputElement, Props>(({ defaultValue }, ref) => {
    return (
        <StyledInputField
            type="number"
            defaultValue={defaultValue || 0} // 用defaultValue设置初始值
            ref={ref}
        />
    );
});

export default InputField;

步骤2：修改MyComponent使用方式 #

保留ref用于后续取值，添加按钮触发取值逻辑，全程不会因输入操作触发重渲染：

const MyComponent= () => {
    const inputValueRef = useRef<HTMLInputElement>(null);

    // 点击按钮时获取当前输入值
    const getCurrentInputValue = () => {
        if (inputValueRef.current) {
            const value = inputValueRef.current.valueAsNumber;
            // 这里处理获取到的值，比如提交表单
            console.log("当前输入值：", value);
        }
    };

    return (
        <>
            <InputField defaultValue={10} ref={inputValueRef} />
            <button onClick={getCurrentInputValue}>获取输入值</button>
        </>
    );
}

可选：支持动态重置初始值 #

如果需要在某些场景下（比如表单重置）更新输入框的初始值，可以在InputField中添加useEffect监听defaultValue变化，手动同步到DOM：

import { useEffect } from 'react';

const InputField = forwardRef<HTMLInputElement, Props>(({ defaultValue }, ref) => {
    useEffect(() => {
        if (ref.current && defaultValue !== undefined) {
            ref.current.value = defaultValue.toString();
        }
    }, [defaultValue, ref]);

    return (
        <StyledInputField
            type="number"
            defaultValue={defaultValue || 0}
            ref={ref}
        />
    );
});

这样既保留了非受控组件的性能优势，又能在需要时动态重置输入框内容。

内容的提问来源于stack exchange，提问作者Denver Dang