как переключать динамику c раскрывающийся список div NEXT. JS - PullRequest
Новая
       6

как переключать динамику c раскрывающийся список div NEXT. JS

2 голосов
/ 12 июля 2020

Я создаю интернет-магазин, используя NEXT. JS и REDUX. На странице со списком продуктов у меня есть раздел фильтров с размером, цветом и т. Д. c. При щелчке по заголовку содержимое должно переключаться. Я пробовал использовать приведенный ниже код, но он не работает должным образом. 

const [showMe, setShowMe] = useState(0);

function toggle(index) {
    setShowMe(index);
}

<div className="other">
    <h6>Refine</h6>
    <hr/>
    {products.filter.map((item, index) => (
        <div key={index}>
            <div className="single">
                <div className="title" onClick={() => toggle(index)}>
                    <p className="float-left">{item.title}</p>
                    <p className="float-right"><FontAwesomeIcon icon={showMe === index ? faChevronUp : faChevronDown}/></p>
                </div>
                <ul style={{display: showMe === index ? "block" : "none"}}>
                    {item.items.map((single, index1) => (
                        <li key={index1}>
                            <label><input type="checkbox" name="checkbox" value="value"/> {single.items_value}</label>
                        </li>
                    ))}
                </ul>
            </div>
            <hr/>
        </div>
    ))}
</div>

Первоначально индекс 0 открыт, а другие закрыты. Onclick index 0 не закрывается. Индекс Onclick 1 открывается, а индекс 0 закрывается.

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

1 Ответ

1 голос
/ 12 июля 2020

Вам нужно проверить, открыт ли уже выбранный элемент, вы можете получить текущее значение setState в первом параметре его setter функции: 

// use an empty array for intial value:
const [showMe, setShowMe] = useState([]);

// after you got `products`:
setShowMe(Array(products.filter.length).fill(0).map((_, index) => index))

function toggle(index) {
    setShowMe(currentShowMe => currentShowMe.includes(index)
      ? currentShowMe.filter(i => i !== index)
      : [...currentShowMe, index]);
}
...
<ul style={{display: showMe.includes(index) ? "block" : "none"}}>
...
...