antd走马灯切换按钮方法的代码

Ant Design的走马灯组件Carousel自带了切换按钮，你可以设置dot属性来开启或关闭切换按钮的显示。如果你想要自定义切换按钮的样式，可以使用beforeChange和afterChange属性来实现，代码如下：

import { Carousel } from 'antd';

class MyCarousel extends React.Component {
  state = {
    current: 0,
  }

  handleChange = (current) => {
    this.setState({ current });
  }

  render() {
    const { current } = this.state;
    return (
      <div>
        <Carousel
          beforeChange={this.handleChange}
          afterChange={this.handleChange}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </Carousel>
        <div style={{ textAlign: 'center' }}>
          <button onClick={() => this.handleChange(current - 1)}>Prev</button>
          <button onClick={() => this.handleChange(current + 1)}>Next</button>
        </div>
      </div>
    );
  }
}

在这个例子中，我们定义了一个MyCarousel组件，通过state来记录当前的位置current。在handleChange方法中，我们更新state中的current。在render方法中，我们将beforeChange和afterChange方法都设置为handleChange，这样走马灯每次切换后都会调用handleChange方法更新state中的current值。我们在组件下方添加了两个按钮来手动调用handleChange方法切换走马灯。