我在 React 中创建了折叠，我为每次点击使用了不同的 useState，但我只想使用一个 useState

Question

    function Solution() {
    const [firstClick,setFirstClick] = useState(true);
    const [secondClick,setSecondClick] = useState(true);
    const [thirdClick,setThirdClick] = useState(true);
    const [fourthClick,setFourthClick] = useState(true);
    const [fivethClick,setFivethClick] = useState(true);
    const [sixthClick,setSixthClick] = useState(true);
    const [seventhClick,setSeventhClick] = useState(true);

    const changeIconFirst = () => {
    firstClick ? setFirstClick(false) : setFirstClick(true);
    setSecondClick(true);
    setThirdClick(true);
    setFourthClick(true);
    setFivethClick(true);
    setSixthClick(true);
    setSeventhClick(true)

    }
    const changeIconSecond = () => {
    secondClick ? setSecondClick(false) : setSecondClick(true);
    setFirstClick(true);
    setThirdClick(true);
    setFourthClick(true);
    setFivethClick(true);
    setSixthClick(true);
    setSeventhClick(true)
    }
    const changeIconThird = () => {
    thirdClick ? setThirdClick(false) : setThirdClick(true);
    setFirstClick(true);
    setSecondClick(true);
    setFourthClick(true);
    setFivethClick(true);
    setSixthClick(true);
    setSeventhClick(true)
    }
    const changeIconFourth = () => {
    fourthClick ? setFourthClick(false) : setFourthClick(true);
    setFirstClick(true);
    setSecondClick(true);
    setThirdClick(true);
    setFivethClick(true);
    setSixthClick(true);
    setSeventhClick(true)
    }
    const changeIconFiveth = () => {
    fivethClick ? setFivethClick(false) : setFivethClick(true);
    setFirstClick(true);
    setSecondClick(true);
    setThirdClick(true);
    setFourthClick(true);
    setSixthClick(true);
    setSeventhClick(true)
    }
    const changeIconSixth = () => {
    sixthClick ? setSixthClick(false) : setSixthClick(true);
    setFirstClick(true);
    setSecondClick(true);
    setThirdClick(true);
    setFourthClick(true);
    setFivethClick(true);
    setSeventhClick(true)
    }
    const changeIconSeventh = () => {
    seventhClick ? setSeventhClick(false) : setSeventhClick(true);
    setFirstClick(true);
    setSecondClick(true);
    setThirdClick(true);
    setFourthClick(true);
    setFivethClick(true);
    setSixthClick(true);
    }

我用了不止一个useState在点击时打开折叠，但我想通过使用一个useState而不是多个useState来建立一个更简单、更动态的结构。 通过使用 true false 方法执行 if else，我更改了 className 以启用折叠以打开和关闭。 方法里没有想到。 我正在等待您的建议，以创建一个更动态、更简单的结构。

Answer 1

如果您有任何问题 go 提前询问，此代码应该可以正常工作

 function Solution() { //this is your main useState that will take control of your collapse const [collapse, setCollapse] = useState(true); // this is your collapse button you should give it an on click event <button onClick={() =>setCollapse(;collapse)}>collapse </button>; }

编辑：

 function Solution() { const [clicks, setClicks] = useState({ firstClick: true, secondClick: true, thirdClick: true, fourthClick: true, fivethClick: true, sixthClick: true, seventhClick: true, }); const changeIconFirst = () => { setClicks({ firstClick: clicks.firstClick? true: false, secondClick: true, thirdClick: true, fourthClick: true, fivethClick: true, sixthClick: true, seventhClick: true, }); }; const changeIconSecond = () => { setClicks({ secondClick: clicks.secondClick? true: false, firstClick: true, thirdClick: true, fourthClick: true, fivethClick: true, sixthClick: true, seventhClick: true, }); }; const changeIconThird = () => { setClicks({ thirdClick: clicks.thirdClick? true: false, firstClick: true, secondClick: true, fourthClick: true, fivethClick: true, sixthClick: true, seventhClick: true, }); }; const changeIconFourth = () => { setClicks({ fourthClick: clicks.fourthClick? true: false, firstClick: true, secondClick: true, thirdClick: true, fivethClick: true, sixthClick: true, seventhClick: true, }); }; const changeIconFiveth = () => { setClicks({ fivethClick: clicks.fivethClick? true: false, firstClick: true, secondClick: true, thirdClick: true, fourthClick: true, sixthClick: true, seventhClick: true, }); }; const changeIconSixth = () => { setClicks({ sixthClick: clicks.sixthClick? true: false, firstClick: true, secondClick: true, thirdClick: true, fourthClick: true, fivethClick: true, seventhClick: true, }); }; const changeIconSeventh = () => { setClicks({ seventhClick: clicks.seventhClick? true: false, firstClick: true, secondClick: true, thirdClick: true, fourthClick: true, fivethClick: true, sixthClick: true, }); }; }

Answer 2

如果你只想使用一个组件，那么你可以通过给每个折叠一个索引来完成。

在渲染中

<button onClick={()=> setId(1)}>Click</button> // can be 1,2,3,4,5,6,7

在你的崩溃中它可能是这样的

<CollapseComponent show={id === 1} />
<CollapseComponent show={id === 2} />
<CollapseComponent show={id === 3} />

我注意到这个问题是关于多次点击的。 所以onClick可以改成如下

const onClick = () => {
     if (id === 7) { //assuming there's 8 pics
        setId(0)
     } else {
        setId(prev => prev+1)
     }
}

<button onClick={onClick}>Click</button>