React中按下Enter键后如何使输入框失焦？

我有一个简单的React输入框，按下Enter键时会触发操作（后续将执行网络请求，目前仅打印状态）。输入框代码如下：

<input onKeyDown={handleEnterPress} />

对应的onKeyDown事件函数已能成功触发，代码如下：

const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.code === "Enter") {
        console.log(state);
    }
}

但目前按下Enter键后，输入框仍处于聚焦状态。我希望此时输入框失焦，标记操作已完成，不再允许编辑，请问最有效高效的实现方法是什么？

方法1：直接调用blur()并禁用输入框（最简方案） #

在handleEnterPress函数中，检测到Enter键触发时，直接通过事件对象获取输入框元素，调用blur()失焦，同时设置disabled属性禁止后续编辑：

const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.code === "Enter") {
        console.log(state);
        // 让输入框失焦
        e.currentTarget.blur();
        // 禁用输入框，阻止后续编辑
        e.currentTarget.disabled = true;
    }
}

这种方式无需额外状态或ref，代码简洁高效，适合简单场景。

方法2：用React状态管理（可扩展方案） #

如果需要后续重新启用输入框等灵活操作，建议用状态控制输入框的禁用状态，结合ref来控制聚焦：

import { useRef, useState } from 'react';

const YourComponent = () => {
    const [isInputDisabled, setIsInputDisabled] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);

    const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.code === "Enter") {
            console.log(state);
            // 标记输入框为禁用状态
            setIsInputDisabled(true);
            // 通过ref让输入框失焦
            inputRef.current?.blur();
        }
    };

    return (
        <input
            ref={inputRef}
            onKeyDown={handleEnterPress}
            disabled={isInputDisabled}
        />
    );
};

这种方式符合React单向数据流原则，便于后续扩展逻辑（比如添加按钮重置isInputDisabled状态重新编辑）。

方法3：阻止默认行为（针对表单场景） #

如果输入框嵌套在<form>标签内，按下Enter会触发表单默认提交行为，可添加e.preventDefault()阻止页面刷新：

const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.code === "Enter") {
        e.preventDefault(); // 阻止表单默认提交
        console.log(state);
        e.currentTarget.blur();
        e.currentTarget.disabled = true;
    }
}

内容的提问来源于stack exchange，提问作者Jon Nicholson