react组件实现失去焦点
实现 React 组件失去焦点的方法
使用 onBlur 事件
在输入元素上绑定 onBlur 事件，当元素失去焦点时触发回调函数。这是最直接的方式：
<input
onBlur={(e) => console.log('失去焦点', e.target.value)}
/>结合 useState 管理状态
通过状态存储输入值，在失去焦点时处理数据：
const [inputValue, setInputValue] = useState('');
const handleBlur = () => {
console.log('最终值:', inputValue);
};
return (
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onBlur={handleBlur}
/>
);自定义 Hook 封装逻辑
可复用逻辑抽离为自定义 Hook：
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()); // 强制失焦触发验证
};注意事项
- 移动端需测试
onBlur与onTouchEnd的兼容性 - 避免在
onBlur中同步触发会重新聚焦的操作（如弹出模态框） - 复杂场景可考虑使用 Formik 或 React Hook Form 库的失焦验证机制
