如何在地圖方法中單擊時僅禁用一個按鈕？在禁用鉤子的幫助下，我已經按下了所有按鈕。以及如何使它在計時器到期后'current__events__hot-price disabled' className 變回'current__events__hot-price'？
import { useEffect, useState } from 'react'
import './CurrentEventsItem.scss'
const CurrentEventsItem = () => {
const [timeLeft, setTimeLeft] = useState(5*60)
const getPadTime = (time) => time.toString().padStart(2, '0')
const minutes = getPadTime(Math.floor(timeLeft / 60))
const seconds = getPadTime(timeLeft - minutes * 60)
useEffect(() => {
const interval = setInterval(() => {
setTimeLeft((timeLeft) => (timeLeft >= 1 ? timeLeft - 1 : setDisabled(false) || 5*60))
}, 1000)
return () => clearInterval(interval)
}, [])
const [appState, changeState] = useState({
objects: [
{id: 1, title: 'Apple iPhone 13 Pro Max 256Gb (небесно-голубой)', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false},
{id: 2, title: '500 Stars', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false},
{id: 3, title: 'Sony PlayStation 5 Digital Edition ', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false}
]
})
const toggleActive = (index) => {
let arrayCopy = [...appState.objects]
arrayCopy[index].statusItem
? (arrayCopy[index].statusItem = false)
: (arrayCopy[index].statusItem = true)
setDisabled(true)
changeState({...appState, objects: arrayCopy})
}
const toggleActiveStyles = (index) => {
if (appState.objects[index].statusItem) {
return 'current__events__hot-price disabled'
} else {
return 'current__events__hot-price'
}
}
const toggleActiveStylesBtns = (index) => {
if (appState.objects[index].statusItem) {
return 'current__events__btn-green disabled'
} else {
return 'current__events__btn-green'
}
}
const [disabled, setDisabled] = useState(false)
return (
<>
<div className='current__events__wrapper'>
{appState.objects.map((item, index) =>
<div className="current__events__hot-price__item" key={index}>
<div className={toggleActiveStyles(index)}>
<h5 className="current__events__card-title__large">Hot Price</h5>
</div>
<div className="current__events__image">
<img src={item.avatar} alt='user' className="rounded-circle" width='75' height='75'/>
</div>
<div className="current__events__info">
<h4 className="current__events__title__middle">{item.title}</h4>
</div>
<div className="current__events__timer">
<span>{minutes}</span>
<span>:</span>
<span>{seconds}</span>
</div>
<button className={toggleActiveStylesBtns(index)} onClick={() => toggleActive(index)} disabled={disabled}>СДЕЛАТЬ ХОД</button>
</div>
)}
</div>
</>
)
}
export default CurrentEventsItem
uj5u.com熱心網友回復：
據我所知，您可以通過索引切換一個元素的狀態并禁用該特定索引處的按鈕。而不是切換statusItem屬性（狀態突變，順便說一句），您應該只存盤“活動”專案的索引。
添加一個activeIndex在“非活動”狀態下為空的狀態，在“活動”狀態下等于一個索引。鉤子應該只實體化間隔，而useEffect間隔回呼應該只減少剩余的時間。useEffect使用依賴于狀態的單獨鉤子timeLeft來重置activeIndex和timeLeft狀態。activeIndex當等于映射索引時禁用按鈕元素。將activeIndex狀態傳遞給 CSS 類名實用程式函式。
例子：
const CurrentEventsItem = () => {
const [activeIndex, setActiveIndex] = useState(null);
const [timeLeft, setTimeLeft] = useState(5*60);
const getPadTime = (time) => time.toString().padStart(2, '0');
const minutes = getPadTime(Math.floor(timeLeft / 60));
const seconds = getPadTime(timeLeft - minutes * 60);
useEffect(() => {
const interval = setInterval(() => {
setTimeLeft((timeLeft) => timeLeft - 1);
}, 1000);
return () => clearInterval(interval);
}, []);
const [appState, changeState] = useState({
objects: [
{id: 1, title: 'Apple iPhone 13 Pro Max 256Gb (небесно-голубой)', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false},
{id: 2, title: '500 Stars', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false},
{id: 3, title: 'Sony PlayStation 5 Digital Edition ', avatar: 'https://cdn-icons-png.flaticon.com/512/147/147144.png', statusItem: false}
]
});
const toggleActive = (index) => {
setActiveIndex(index);
};
useEffect(() => {
if (timeLeft <= 0) {
setActiveIndex(null);
setTimeLeft(5 * 60);
}
}, [setActiveIndex, setTimeLeft, timeLeft]);
const toggleActiveStyles = (index) => {
if (index === activeIndex) {
return 'current__events__hot-price disabled';
} else {
return 'current__events__hot-price';
}
};
const toggleActiveStylesBtns = (index) => {
if (index === activeIndex) {
return 'current__events__btn-green disabled';
} else {
return 'current__events__btn-green';
}
};
return (
<>
<div className='current__events__wrapper'>
{appState.objects.map((item, index) =>
<div className="current__events__hot-price__item" key={index}>
<div className={toggleActiveStyles(activeIndex)}>
<h5 className="current__events__card-title__large">Hot Price</h5>
</div>
<div className="current__events__image">
<img src={item.avatar} alt='user' className="rounded-circle" width='75' height='75'/>
</div>
<div className="current__events__info">
<h4 className="current__events__title__middle">{item.title}</h4>
</div>
<div className="current__events__timer">
<span>{minutes}</span>
<span>:</span>
<span>{seconds}</span>
</div>
<button
className={toggleActiveStylesBtns(activeIndex)}
onClick={() => toggleActive(index)}
disabled={activeIndex === index}
>
СДЕЛАТЬ ХОД
</button>
</div>
)}
</div>
</>
);
}
export default CurrentEventsItem
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492757.html
標籤：javascript 反应 按钮 反应钩子 颜色