自动播放时如何更改反应光滑轮播的按钮图标？

问题描述

我的 reactJS 网页有一个带有 2 个按钮的 react-slick carousel。一种是暂停自动播放，另一种是开始自动播放 自动播放正在工作，暂停按钮也在工作，但单击时不会更改为播放图标。 我怎样才能制定我的条件，让它能够在点击时更改图标？

const Home = () => {
  const [data,setData] = useState([{}]);
  const [isLoading,setIsLoading] = useState(true);
  const [autoplayOn,setAutoplayOn] = useState(true);
  const settings = {
    infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,autoplay: true,};
  const customeSlider = React.createRef();
  const gotoNext = () => {
    customeSlider.current.slickNext();
  };
  const goToPlay = () => {
    customeSlider.current.slickPlay();
  };
  const goToPause = () => {
    customeSlider.current.slickPause();
  };
  const gotoPrev = () => {
    customeSlider.current.slickPrev();
  };
  const fetchData = async () => {
    try {
      const response = await axios.get(
        "https://art-ceramic.herokuapp.com/home"
      );
      setData(response.data);
      setIsLoading(false);
    } catch (error) {
      console.log(error.message);
    }
  };
  useEffect(() => {
    setTimeout(() => setIsLoading(false),12000);
    fetchData();
  },[]);
  
  return isLoading ? (
    <span></span>
  ) : (
    <div className="home-container">
      <div className="row">
        <div className="menu-ordi">
          <Left />
        </div>
        <div className="product-images">
          <Slider
            {...settings}
            className="carousel"
            arrows={true}
            ref={customeSlider}
          >
            {data.products.map((el) => {
              return (
                <div className="div-carousel">
                  {el.product_image && (
                    <img
                      className="pics"
                      src={el.product_image.url}
                      alt="home-carousel"
                    />
                  )}
                </div>
              );
            })}
          </Slider>
          <div className="description-work">
            <div className="nextt row">
              <button className="click-n" onClick={() => gotoPrev()}>
                <FontAwesomeIcon icon={faChevronLeft} />
              </button>
              {settings.autoplay ? (
                <button
                  className="click-n"
                  onClick={() => {
                    goToPause();
                  }}
                >
                  <FontAwesomeIcon icon={faPause} />
                </button>
              ) : (
                <button className="click-n">
                  <FontAwesomeIcon icon={faPlay} onClick={() => goToPlay()} />
                </button>
              )}

              <button className="click-n" onClick={() => gotoNext()}>
                <FontAwesomeIcon icon={faChevronRight} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）