暂停并在reactjs中播放时间间隔滑块

Question

我创建了一个带有时间间隔的滑块，并添加了额外的功能"暂停和播放"，代码。。

const [value, setValue] = useState('1')
const [status, setStatus] = useState("working");
const handleChange = (event, newValue) => {
setValue(newValue)
}
useEffect(() => {

console.log(status);
if (status === "working") {
const interval = setInterval(() => {
if(parseInt(value) + 1 === 3) {
setValue('1')
} else {
setValue((parseInt(value) + 1).toString())
}
document.getElementById('slide' + value).click()
}, 5000)
return () => clearInterval(interval)
}else if(status === "paused"){

}


})

const puseSlide = () => {
setStatus("paused");
}
return(
<div>
{value === '1' && (
<img src={Imageone}/>
)}
{value === '2' && (
<img src={Imagetwo}/>
)}

<Tabs value={value} onChange={handleChange}>
<Tab onClick={puseSlide} id="slide1" value="1">.</Tab>
<Tab onClick={puseSlide} id="slide2" value="1">.</Tab>
</Tabs>
</div>
)

这个滑块正在工作，但我正在写一个自动调用第一个幻灯片更改的onclick事件，为什么？我是react 的新手

Answer 1

document.getElementById('slide'+value(.click((

useEffect中的这一行是问题的原因。在递增该值之后，您正在id为"的元素上执行点击操作；幻灯片"；或"；滑动2"；其正在调用函数CCD_ 2。相反，您只想在用户明确单击暂停按钮时暂停。为了避免调用puseSlide函数，只需从useEffect挂钩中删除这一行document.getElementById('slide' + value).click()，您就不应该在第一张幻灯片更改后看到正在调用的函数。