先放代碼
import?React?from?'react';
import?{?Carousel,?Button?}?from?'antd';
class?Slideshow?extends?React.Component{
??constructor(props){
????super(props);
????this.card=React.createRef();
??}
??render(){
????return?(
??????<div>????????
????<Button
??????onClick={()?=>?{
????????this.card.current.prev();
??????}}
????>
????</Button>
????<Button
??????onClick={()?=>?{
????????this.card.current.next();
??????}}
????>
????</Button>?
????????<Carousel?autoplay?ref={this.card}>
??????????<div>
????????????<h3?style={contentStyle}>1</h3>
??????????</div>
??????????<div>
????????????<h3?style={contentStyle}>2</h3>
??????????</div>
??????????<div>
????????????<h3?style={contentStyle}>3</h3>
??????????</div>
??????????<div>
????????????<h3?style={contentStyle}>4</h3>
??????????</div>
????????</Carousel>
??????</div>
????)
??}
}
export?default?Slideshow;
這里首先是要創(chuàng)建一個變量去綁定到dom上
創(chuàng)建變量
constructor(props){
????super(props);
????this.card=React.createRef();
??}
綁定組件
<Carousel?autoplay?ref={this.card}>
然后再通過button事件去調(diào)用Ant Design官方給出的prev()坠敷,next()api爽哎。
剩下的button樣式就自己控制了
因為現(xiàn)在我還在學習react階段,在這里我作死沒有直接調(diào)用api浑此,先打印這個dom出來看看
我以為這里會用有一些dom的屬性方法的骆捧,看到?jīng)]有官方給的api我還以為我獲取錯了候学,查了老半天歧寺,直接調(diào)用發(fā)現(xiàn)居然能用