当前位置：首页 > React

react实现失去焦点事件

2026-01-27 19:46:45React

在 React 中实现失去焦点事件

在 React 中，可以通过 onBlur 事件处理器来监听元素失去焦点的事件。以下是几种常见的实现方式：

react实现失去焦点事件

使用原生 `onBlur` 事件

function InputComponent() {
  const handleBlur = () => {
    console.log('Input lost focus');
  };

  return <input type="text" onBlur={handleBlur} />;
}

使用 `useRef` 和原生 DOM 事件

如果需要更精细的控制，可以使用 useRef 直接访问 DOM 元素：

react实现失去焦点事件

import { useRef } from 'react';

function InputComponent() {
  const inputRef = useRef(null);

  const handleBlur = () => {
    console.log('Input lost focus', inputRef.current.value);
  };

  return <input type="text" ref={inputRef} onBlur={handleBlur} />;
}

在表单组件中使用

失去焦点事件常用于表单验证：

function FormComponent() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleBlur = () => {
    if (!value) {
      setError('This field is required');
    } else {
      setError('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={handleBlur}
      />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  );
}

自定义 Hook 封装

可以创建一个自定义 Hook 来复用失去焦点的逻辑：

function useBlur(initialValue, validationFn) {
  const [value, setValue] = useState(initialValue);
  const [error, setError] = useState('');

  const handleBlur = () => {
    const validationError = validationFn(value);
    setError(validationError);
  };

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

function MyForm() {
  const name = useBlur('', (value) => {
    if (!value) return 'Name is required';
    return '';
  });

  return (
    <div>
      <input type="text" {...name} />
      {name.error && <div style={{ color: 'red' }}>{name.error}</div>}
    </div>
  );
}