如何切换动态 div 下拉列表 NEXT.JS答案

【问题标题】：how to toggle dynamic div dropdown NEXT.JS如何切换动态 div 下拉列表 NEXT.JS
【发布时间】：2020-07-12 04:50:46
【问题描述】：

我正在使用 NEXT.JS 和 REDUX 构建电子商务商店。在产品列表页面中，我有具有大小、颜色等的过滤器部分。单击标题时，应切换内容。我已经尝试使用下面的代码，但它没有按预期工作。

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 索引 0 它没有关闭。 Onclick 索引 1 会打开，索引 0 会关闭。

我想要输出，最初所有的下拉菜单都应该是打开的。单击每个 div 后，它应该关闭，然后单击它应该打开。如何更改我的代码来实现这一点。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您需要检查点击的项目是否已经打开，您可以在setter 函数的第一个参数中获取setState 的当前值：

// 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"}}>
...

【讨论】：