React — популярная библиотека JavaScript для создания динамических пользовательских интерфейсов. В приложении React иногда требуется кнопка или ссылка, чтобы вызвать показ или скрытие связанного компонента. Это требование может быть достигнуто с помощью механизмов управления состоянием и обработки событий React.

В этой статье мы покажем вам, как показать или скрыть другой компонент по клику с помощью React. Сначала мы обсудим, как использовать управление состоянием React для управления видимостью компонентов, а затем рассмотрим, как использовать механизмы обработки событий для реагирования на взаимодействия с пользователем.

Управляйте видимостью компонентов с помощью управления состоянием React.

Состояние в React относится к личным данным компонента, которые определяют внешний вид и поведение компонента при его рендеринге. При изменении состояния компонент выполняет повторную визуализацию, чтобы отразить эти изменения. Компоненты React имеют два типа состояния: локальное состояние и глобальное состояние.

Локальное состояние (также называемое состоянием компонента) — это состояние внутри компонента, и его можно изменить только внутри компонента. Глобальное состояние (также известное как состояние приложения) — это состояние всего приложения, к которому можно получить доступ и которое можно изменить из различных компонентов. В этой статье мы остановимся на местном статусе.

существовать React в, использовать useState крюк可以创建本地状态。useState Хук возвращает массив, где первый элемент — это значение текущего состояния, а второй элемент — это функция, обновляющая это состояние.

Вот пример, показывающий, как использовать useState Хук создает состояние, которое управляет видимостью компонента.

import { useState } from "react";

function App(){
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      {isVisible && <div>Hello, World!</div>}
    </div>
  );
}

существуют В этом примере мы используем useState Хук создает файл с именем isVisible локальное состояние и установите его начальное значение false。Затем,Возвращаемое значение нашего компонента существования отображает кнопку и условный рендеринг. div элемент.

когда пользователь нажимает кнопку,onClick Обработчик событий вызовет setIsVisible функционировать и будет !isVisible Передайте его как параметр.

!isVisible Представляет логическое значение, противоположное текущему значению. если isVisible Значение false,Тогда оно перевернётся и станет true,если isVisible Значение true,Тогда оно перевернётся и станет false。

если isVisible Значение true,затем условно визуализируется div Элемент будет отображен. В противном случае он не будет отображен.

Реагируйте на взаимодействия с пользователем, используя механизмы обработки событий.

React Компоненты доступны onClick Функция обработчика событий для реагирования на событие щелчка пользователя. когда пользователь нажимает кнопку,onClick Запускается обработчик событий и выполняется некоторый логический код.

существоватьв предыдущем разделе,Мы написали простой пример переключения видимости компонента при нажатии кнопки. Следующий,Мы рассмотрим, как реализовать более расширенную функциональность с помощью обработчиков событий.

Показать/скрыть меню

Мы можем использовать обработчики событий, чтобы показать или скрыть меню. Когда пользователь нажимает кнопку меню, меню должно появиться, затем, когда пользователь нажимает за пределами меню, меню должно исчезнуть.

Вот пример, показывающий, как использовать React и функции обработки событий для отображения и скрытия меню.

import { useState, useRef, useEffect } from "react";
import "./menu.css";

function App(){
  const [isVisible, setIsVisible] = useState(false);
  const menuRef = useRef(null);

  const handleClickOutside = (event) => {
    if (menuRef.current && !menuRef.current.contains(event.target)) {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Menu</button>
      {isVisible && (
        <div className="menu" ref={menuRef}>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
        </div>
      )}
    </div>
  );
}

существуют В этом примере,нас创建了一个名为 menuRef ссылка, которая будет указывать на элемент меню. Затем мы пишем файл с именем. handleClickOutside Функция-обработчик событий, которая проверит, находится ли элемент, на который нажал пользователь, за пределами меню.

Если элемент, на который щелкнул пользователь, отсутствует в существующем меню, установите видимость на false,Меню будет скрыто. в противном случае,Меню остается видимым.

Мы также использовали useEffect крюк来添加和删除事件监听器。useEffect Хук существует и регистрирует прослушиватель событий, когда компонент монтируется.,И удалите их, когда они существуют.,во избежание утечек памяти.

Показать/скрыть модальное окно

Мы можем использовать обработчики событий для запуска отображения или скрытия модальных диалоговых окон. Модальное окно должно появляться, когда пользователь нажимает кнопку, открывающую модальное окно, и исчезать, когда пользователь нажимает кнопку закрытия или находится за пределами модального окна.

Вот пример, показывающий, как использовать React и функции обработки событий для отображения и скрытия модальных диалоговых окон.

import { useState, useRef, useEffect } from "react";
import "./modal.css";

function App(){
  const [isVisible, setIsVisible] = useState(false);
  const modalRef = useRef(null);

  const handleClickOutside = (event) => {
    if (modalRef.current && !modalRef.current.contains(event.target)) {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div>
      <button onClick={() => setIsVisible(true)}>Open Modal</button>
      {isVisible && (
        <div className="modal-overlay">
          <div className="modal" ref={modalRef}>
            <h2>Modal Title</h2>
            <p>Modal Content</p>
            <button onClick={() => setIsVisible(false)}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

существуют В этом примере,нас创建了一个名为 modalRef ссылка, которая будет указывать на элемент модального диалога. Затем мы пишем файл с именем. handleClickOutside Функция обработчика событий, которая проверяет, находится ли элемент, на который нажал пользователь, за пределами модального диалогового окна.

Если элемент, на который щелкнул пользователь, отсутствует в модальном диалоговом окне, то для видимости устанавливается значение false,Модальное диалоговое окно будет скрыто. в противном случае,Модальное диалоговое окно остается видимым.

Мы также добавили кнопку закрытия для закрытия модального диалогового окна. Когда пользователь нажимает кнопку закрытия, мы устанавливаем видимость на false,Модальное диалоговое окно будет скрыто.

краткое содержание

существоватьв этой статье,нас介绍了如何использовать React Чтобы отобразить или скрыть другой компонент по щелчку мыши. Сначала мы обсудили, как использовать React Управление состоянием для контроля видимости компонентов. Затем мы рассмотрели, как использовать механизмы обработки событий для реагирования на взаимодействия с пользователем.

Мы также приводим два примера: Как Показать/скрыть менюи как Показать/скрыть модальное окно. Эти примеры можно использовать в качестве справочного материала, который поможет вам существовать самостоятельно. React Реализовать функцию нажатия, чтобы показать или скрыть другой компонент в приложении.