在react类基组件中设置setTimeOut

Question

请我想setTimeOut在我的类基组件。尝试不同的方法，但仍然不起作用。我想setTimeout调用nextClick/onClickI指定秒后，但是，仍然不明白如何去做。请帮忙，如果你有一个想法。下面是组件代码…

class AbCarousel extends Component {
state = {
data: []
}
myRef = React.createRef();
getData = async () => {
const res = await fetch('aboutdata.json');
const data = await res.json();
this.setState({data: data})
}
componentDidMount() {
this.getData();
}

prevClick = () => {
const slide = this.myRef.current;
slide.scrollLeft -= slide.offsetWidth;
if (slide.scrollLeft <= -0){
slide.scrollLeft = slide.scrollWidth; 
}
};

nextClick = () => {
const slide = this.myRef.current;
slide.scrollLeft += slide.offsetWidth;
if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
slide.scrollLeft = 0; 
}
};

render() {
const { data } = this.state;
return (
<div className="wrapper">
<div className="app" ref={this.myRef}>
<AbCard data={data} />
</div>
<div className="row">
<div className="prev" onClick={this.prevClick}>
<div><FaChevronLeft /></div>
</div>
<div className="next" onClick={this.nextClick}>
<div><FaChevronRight /></div>
</div>
</div>
</div>
)
}
}
export default AbCarousel

Answer 1

最简单的就是更新您的onClick处理程序，将setTimeout作为回调，如下所示

onClick={() => setTimeout(this.nextClick, numSeconds)

或者您可以直接更新nextClick方法，并在setTimeout中使用回调函数，并包装您希望延迟执行的代码:

nextClick = () => {
const slide = this.myRef.current;

setTimeout(() => {
slide.scrollLeft += slide.offsetWidth;
if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
slide.scrollLeft = 0; 
}, numSeconds)
}