用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中显示了他们的所有值。

问题是当我点击跨度所有项目打开和关闭(预期)。接下来的步骤是什么，只有我点击打开和关闭的项目，而其余的保持隐藏?

Answer 1

在state中使用单个索引变量，它指示当前打开的项。

之类的东西

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状态变量。