Этот пост о том, как создать внешний обработчик кликов в React, используя createRef()
. Есть хуки, которые можно установить для этого, но я хотел попробовать разобраться сам. Функция, которую я создал:
Как вы можете видеть выше, при нажатии на ввод поиска заполнитель, значок поиска перемещается влево, и появляется значок отмены. При щелчке за пределами ввода они возвращаются в исходное положение, а значок отмены исчезает. Давайте посмотрим на коды ниже:
class Header extends Component { constructor() { super(); this.state = { searchInput: “”, searchIcon: false, searchPlaceholder: false, cancelIcon: false }; this.searchRef = React.createRef(); }
- Я установил состояния
searchIcon
,searchPlaceholder
иcancelIcon
, как указано выше, а затем создалsearchRef
с помощьюReact.createRef()
. Согласно официальной документации React, ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга. Ссылки можно использовать, когда мы управляем фокусом, выделением текста или воспроизведением мультимедиа. Их не следует чрезмерно использовать для всего, что можно сделать декларативно.Refs
обычно назначаются в конструкторе, чтобы на них можно было ссылаться во всем компоненте.
<input ref={this.searchRef} />
2. Затем ссылка добавляется к элементу DOM, в данном случае input
, с использованием атрибута ref
.
clickOutside = (e) => { if (!this.searchRef.current.contains(e.target)) { const { searchIcon, searchPlaceholder, cancelIcon } = this.state; this.setState({ searchIcon: !searchIcon, searchPlaceholder: !searchPlaceholder, cancelIcon: !cancelIcon, }); } };
3. Теперь у нас есть ссылка на поисковый ввод, я создал функцию обработчика событий с помощью contains()
, которая проверяет, не содержит ли searchRef
e.target
, состояния иконок и плейсхолдера устанавливаются противоположными. Это обнаружит щелчок за пределами ввода поиска и вернет значки и заполнитель в исходное положение. У меня также есть отдельный обработчик onClick
, который перемещает свои позиции при нажатии на ввод.
componentDidMount() { document.addEventListener(“click”, this.clickOutside); } componentWillUnmount() { document.removeEventListener(“click”, this.clickOutside); }
4. Я добавил прослушиватель событий clickOutside
в componentDidMount()
. Он вызывается сразу после монтирования компонента. Инициализация, требующая узлов DOM, должна идти здесь. Затем я также добавил componentWillUnmount()
, чтобы удалить прослушиватель событий, который представляет собой функцию, вызываемую непосредственно перед удалением компонента из DOM. Обычно он используется для очистки любого элемента DOM или таймера, созданного в componentDidMount()
.