Как отследить потерю фокуса у textarea в React?

Question

Есть textarea созданная с помощью этого.

Как сделать действия при клике я знаю, а как отследить когда пользователь кликает в любое другое место или на другую textarea, и выполнить действия в этот момент?

Answer 1

Что бы отследить когда какой либо input (в том числе кнопки, селекты и текстовые поля) становиться "неативным" можно воспользоваться event'ом onBlur:

const YourComponent = () => {    
    const [state, setState] = useState("")
    
    const handleChange = event => {
       setState(event.target.value)
    }

    const handleBlur = () => {
       // ... ваша логика
       // то что должно происходить
       // когда элемент теряет фокус 
    }
    
    return <textarea onBlur={handleBlur} onChange={handleChange} value={state} />
}

Answer 2

События которое вам нужно называетсья onBlur. Данное событие вызывается когда элемент теряет фокус.

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: <button>, <input>, <select>, <textarea> и т.д.

export default function App() {
  const [blur, setBlur] = useState();
  return (
    <div className="App">
      <textarea
        onBlur={_ => console.log`ФОКУС потеряли O_o`}
        onChange={e => setBlur(e.target.value)}
      >
        {blur}
      </textarea>
    </div>
  );
}

Ссылка на Codesandbox

БЛОГ НА HUSL

Как отследить потерю фокуса у textarea в React?

Ответы (2 шт):