我在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

如果您有任何问题，请继续询问

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>