最初打开下拉列表的第三项并允许它在单击时关闭

Question

我有一个下拉项目列表。 它们最初都是关闭的。 单击已关闭的下拉项将其打开。 单击打开的下拉项将其关闭。

（简化代码以便于阅读）

import React, { useEffect, useState } from 'react'
import { Collapse } from '@blueprintjs/core'
import styles from './a-type.module.scss'

const NudgeTrigger = ({ isShowItem, checkItem, index, title }) => {
  const [toggleArrow, setToggleArrow] = useState(false)
  return (
    <div className={`nudgeTrigger ${toggleArrow ? 'nudgeTriggerUpArrow' : ''}`} onClick={() => {
      // Does the index exist in the showListItem array? Yes: delete it and close dropdown. No: add it and open dropdown.
      isShowItem(index) ? checkItem(index, false) : checkItem(index, true)
      setToggleArrow(!toggleArrow)
    }}>
      <p key={index} className={styles.nudgeTitle}>{title}</p>
    </div>
  )
}

const contactCalculator = () => {
  const [showListItem, setShowListItem] = useState([])
  const [nudgeList, setNudgeList] = useState([])

  // dropDown open/close
  const checkItem = (index, value) => {
    if (value) {
      setShowListItem(showListItem => [...showListItem, index])
    } else {
      setShowListItem(showListItem => showListItem.filter(item => item !== index))
    }
  }

  const isShowItem = (index) => {
    if (showListItem.indexOf(index) > -1) {
      return true
    } else {
      return false
    }
  }

  return (
      <div className="contents-width">
        <div id="calculator" className="contents-width">
          {nudgeList.map((nudge, index) => {
            return (
              <div key={index} className={styles.nudgeItem}>
                <NudgeTrigger isShowItem={isShowItem} checkItem={checkItem} index={index} title={nudge.title}/>
                <Collapse isOpen={isShowItem(index)}>
                  <p className={styles.nudgeContent}>{nudge.content}</p>
                </Collapse>
              </div>
            )
          })}
        </div>
      </div>
  )
}

export default contactCalculator

打开/关闭 state 由以下组件管理

<Collapse isOpen={isShowItem(index)}>

我希望最初打开第三个下拉项。 我的第一次尝试是编辑以下代码

  const isShowItem = (index) => {
    if (showListItem.indexOf(index) > -1) {
      return true
    } else {
      return false
    }
  }

始终打开第二个索引（第三项）

  const isShowItem = (index) => {
    if (showListItem.indexOf(index) > -1) {
      return true
    } else if (index === 2) {
      return true
    } else {
      return false
    }
  }

但是这样做会使第三项始终处于打开状态。 即使我点击它，它也不会关闭。

如何使第三个下拉列表项最初打开，然后使其能够再次关闭？

Answer 1

您可以通过使用索引 2 初始化showListItem数组来轻松完成此操作。

 const [showListItem, setShowListItem] = useState([2])

并恢复isShowItem function 如下所示： -

  const isShowItem = (index) => {
    if (showListItem.indexOf(index) > -1) {
      return true
    } else {
      return false
    }
  }