当前位置：首页 > React

react组件实现失去焦点

2026-01-27 17:30:20React

实现 React 组件失去焦点的方法

使用 onBlur 事件
在输入元素上绑定 onBlur 事件，当元素失去焦点时触发回调函数。这是最直接的方式：

<input 
  onBlur={(e) => console.log('失去焦点', e.target.value)} 
/>

结合 useState 管理状态
通过状态存储输入值，在失去焦点时处理数据：

react组件实现失去焦点

const [inputValue, setInputValue] = useState('');
const handleBlur = () => {
  console.log('最终值:', inputValue);
};

return (
  <input 
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    onBlur={handleBlur}
  />
);

自定义 Hook 封装逻辑
可复用逻辑抽离为自定义 Hook：

react组件实现失去焦点

function useBlurHandler(initialValue, callback) {
  const [value, setValue] = useState(initialValue);
  const handleBlur = () => callback(value);

  return {
    value,
    onChange: (e) => setValue(e.target.value),
    onBlur: handleBlur
  };
}

// 使用示例
const inputProps = useBlurHandler('', (val) => console.log(val));
return <input {...inputProps} />;

处理动态生成的元素
对于动态渲染的组件，可通过 useRef 绑定事件：

const inputRef = useRef();
useEffect(() => {
  const current = inputRef.current;
  current.addEventListener('blur', () => console.log('blur'));
  return () => current.removeEventListener('blur');
}, []);

return <input ref={inputRef} />;

表单整体失去焦点验证
在表单提交时检查所有字段的失焦状态：

const formRef = useRef();
const handleSubmit = () => {
  const inputs = formRef.current.querySelectorAll('input');
  inputs.forEach(input => input.blur()); // 强制失焦触发验证
};