使用 useState 隐藏/显示 div？

Question

这里是 React 开发新手。

这是我的状态和函数，它可以将 ul 从 display:none 切换到 display:block

const [dropDown, setDropdown] = useState('hidden')

const [icon, setIcon] = useState('\u2795')

const handleHidden = () => {

if (dropDown === 'hidden') setDropdown('active')
if (dropDown === 'active') setDropdown('hidden')
if (icon === '\u2795') setIcon('\u2796')
if (icon === '\u2796') setIcon('\u2795')

}

图标只是在 unicode“+”和“-”之间切换

和相应的 onClick 函数在两者之间切换类:

 <span onClick={() => handleHidden()} className='plus-minus'>{icon}</span></h3>

除了这段代码之外，我还映射了一组学生并将他们的所有值显示在 div 中。

问题是当我单击 span 所有项目打开和关闭时（预期）。如果仅让我单击的项目打开和关闭而其余的保持隐藏，接下来的步骤是什么？

Answer 1

改为在状态中使用单个索引变量，它指示当前打开的项目。类似于

const [openIndex, setOpenIndex] = useState(-1); // none open initially
const makeHandleClick = i => () => {
  setOpenIndex(i === openIndex ? -1 : i);
};
// ...
return students.map((student, i) => (
  // ...
   <span onClick={makeHandleClick(i)} className='plus-minus'>
    {openIndex === i ? '\u2795' : '\u2796'}
  }</span>

要检查渲染时应该打开还是关闭学生项目，请检查 i === openIndex。也不需要 icon 状态变量。

使用 useState 隐藏/显示 div？

hiding/ revealing divs with useState?

html

javascript

state

reactjs

use-state