React中如何通过refs给input设置焦点？条件渲染后调用focus报错如何解决？

数据老陈

2026-10-5

错误原因

你调用的setIsTouched是React的异步状态更新方法，执行后不会立刻触发组件重渲染，也不会立刻挂载<ViewModule />组件。此时你直接调用textInput.current.focus()，绑定在<ViewModule />内部input上的ref还没完成赋值，current属性还是初始值null，就会抛出该类型错误。

解决方案

把聚焦逻辑放到useEffect钩子中，监听isTouched状态的变化，等状态更新、组件重渲染完成、<ViewModule />挂载完毕后再执行聚焦操作，只需修改Sales组件代码即可：

const Sales = () => {
    const [isTouched, setIsTouched] = useState(false);
    const textInput = useRef(null);


    function handleInput() {
        setIsTouched(true);
        // 移除此处的focus调用
    }

    // 新增useEffect监听isTouched变化
    useEffect(() => {
        // 增加判断条件避免边界报错
        if (isTouched && textInput.current) {
            textInput.current.focus();
        }
    }, [isTouched])

    const readyBlock = isTouched ? <ViewModule textInput={textInput}/> : null;
    return (
        <main className="sales-page">
            <div className="main__title">
                <h2 className="main__heading">Bonuses</h2>
            </div>
            <div className="content-container">
                <UploadForm>
                    <FileUploadInput 
                        handleChange={handleInput}
                        placeholder="Header"/>
                    <FileUploadTextArea placeholder="Descr"/>
                </UploadForm>
            </div>
            <div className="ready-container ">
                {readyBlock}
            </div>
        </main>
    )
}