先放代码
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;
这里首先是要创建一个变量去绑定到dom上
创建变量
constructor(props){
super(props);
this.card=React.createRef();
}
绑定组件
<Carousel autoplay ref={this.card}>
然后再通过button事件去调用Ant Design官方给出的prev()，next（）api。
剩下的button样式就自己控制了
因为现在我还在学习react阶段，在这里我作死没有直接调用api，先打印这个dom出来看看
我以为这里会用有一些dom的属性方法的，看到没有官方给的api我还以为我获取错了，查了老半天，直接调用发现居然能用
