[英]How can I change only one value in a React useState that contains an object and assign a different one to the rest?
[英]I created collapse in React, I used different useState for each click, but I want to use only one useState
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 以啟用折疊以打開和關閉。 方法里沒有想到。 我正在等待您的建議,以創建一個更動態、更簡單的結構。
如果您有任何問題 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, }); }; }
如果你只想使用一個組件,那么你可以通過給每個折疊一個索引來完成。
在渲染中
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.