轮播中React的上一个和下一个按钮

Question

我一直在寻找一种在ReactJS的Materialize轮播中实现上一个和下一个按钮的方法。谁能帮助我确定我做错了什么？目前，我正在通过嵌入式脚本访问插件，并遵循实现站点上的文档。

class Home extends Component {
  componentDidMount() {
    const M = window.M;
    document.addEventListener("DOMContentLoaded", function() {
      var elems = document.querySelectorAll(".carousel");
      var instance = M.Carousel.init(elems, {
        fullWidth: true,
        indicators: true
      });

      var handlePrevClick = () => {
        instance.prev();
      };

      var handleNextClick = () => {
        instance.next();
      };
    });
  }

  render() {
    return (
      <div className="project-details-div">
        <h3 className="section-title">Projects</h3>
        <br></br>
        <div className="home">
          <h4 className="center">Home</h4>

          <div className="carousel">
            <div className="carousel-fixed-item center middle-indicator">
              <div className="left">
                <a
                  className="movePrevCarousel middle-indicator-text waves-effect waves-light content-indicator"
                  onClick={this.handlePrevClick}
                >
                  <i className="material-icons left  middle-indicator-text">
                    chevron_left
                  </i>
                </a>
              </div>

              <div className="right">
                <a
                  className=" moveNextCarousel middle-indicator-text waves-effect waves-light content-indicator"
                  onClick={this.handleNextClick}
                >
                  <i className="material-icons right middle-indicator-text">
                    chevron_right
                  </i>
                </a>
              </div>
            </div>
            <a className="carousel-item" href="#one!">
              <img src="https://lorempixel.com/250/250/nature/1" alt="" />
            </a>
            <a className="carousel-item" href="#two!">
              <img src="https://lorempixel.com/250/250/nature/2" alt="" />
            </a>
          </div>
        </div>
      </div>
    );
  }
}````