Блог

Главная - Вопросы по программированию - Показать/Скрыть div onClick

Показать/Скрыть div onClick

#reactjs

Вопрос:

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

Фрагмент кода

   const [posts, setPosts] = useState([]);
  const [commentState, commentChange] = useState({
    activeObject: null
  });

  const toggleComment = (index) => {
    commentChange({...commentState, activeObject: posts[index]})
  }

  const toggleActiveStyles = (index) => {
    if(posts[index] === commentState.activeObject) {
      return "dashboard__commentContent toggle";
    } else {
      return "dashboard__commentContent";
    }
  }


 return error ? (
    <span>{error}</span>
  ) : (
  
  {posts.map((post, i) => (
       <button onClick={() => toggleComment(i)} >toggle</button>


       <div className={toggleActiveStyles(i)}>
           <h1>{post.title}</h1>
       </div>
  )}

Комментарии:

1. что же toggleComment делать?

2. @SinanYaman извиняется, я, должно быть, забыл об этом, но я обновил код.

Ответ №1:

Вот рабочий код и поле, которым вы можете управлять в соответствии с вашими потребностями.

Объяснение

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

Код

 import { useState } from "react";
import "./styles.css";

const DATA = ["1", "2", "3", "4"];

export default function App() {
  const [closedDivs, setClosedDivs] = useState([]);

  const toggleDiv = (i) => {
    setClosedDivs((divs) =>
      divs.includes(i) ? divs.filter((d) => d !== i) : [...divs, i]
    );
  };

  return (
    <div className="App">
      {DATA.map((d, i) => (
        <div
          className={`${closedDivs.includes(i) ? "close" : ""} box`}
          onClick={() => toggleDiv(i)}
        >
          <p> {d} </p>
        </div>
      ))}
    </div>
  );
}

Комментарии:

1. Если вы не возражаете, я спрошу, где находится divs.includes ()? или дивы по всему, какие данные поступают. Я пытался это реализовать, так что я просто пытаюсь понять, в чем моя ошибка.

2. Поскольку мы переключаем divs на открытие/закрытие, я выполняю toggleDivs функцию удаления индекса div из массива, если он присутствует, или добавления в массив, если его нет. .includes() проверяет, находится ли индекс в массиве или нет. Если у вас есть объект в виде элементов массива, вы можете использовать что-то вроде .find() или .some() или .filter(...).length > 0

3. Я вижу, что проблема возникла из-за неправильного класса css, поэтому он работает сейчас, большое вам спасибо!

Метки: