当前位置：首页 > React

react中如何使用onblur

2026-01-24 19:38:30React

在 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}
    />
  );
}

表单验证示例

react中如何使用onblur

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>
  );
}