react中如何使用onblur
在 React 中使用 onBlur 事件
onBlur 是当元素失去焦点时触发的事件。在 React 中，可以通过以下方式使用：
基础用法
<input
type="text"
onBlur={(e) => console.log('Input lost focus', e.target.value)}
/>在类组件中使用
class MyComponent extends React.Component {
handleBlur = (e) => {
console.log('Input lost focus', e.target.value);
};
render() {
return <input type="text" onBlur={this.handleBlur} />;
}
}在函数组件中使用
function MyComponent() {
const handleBlur = (e) => {
console.log('Input lost focus', e.target.value);
};
return <input type="text" onBlur={handleBlur} />;
}与状态管理结合
function MyComponent() {
const [value, setValue] = useState('');
const handleBlur = (e) => {
setValue(e.target.value);
console.log('Final value:', e.target.value);
};
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={handleBlur}
/>
);
}表单验证示例
function Form() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const validateEmail = (e) => {
const value = e.target.value;
if (!value.includes('@')) {
setError('Invalid email');
} else {
setError('');
}
};
return (
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
onBlur={validateEmail}
/>
{error && <p style={{color: 'red'}}>{error}</p>}
</div>
);
}注意事项
onBlur和onFocus是成对的事件- 对于表单验证，通常建议同时使用
onChange和onBlur - 移动端设备上 blur 事件可能有不同的行为
- 可以用于实现自定义的下拉菜单关闭逻辑
