React antd 轮播方法 [英] React antd carousel methods

问题描述

我正在考虑使用 antd Carousel，但我还没有看到描述如何使用 goTo(slideNumber, dontAnimate) 方法的示例.

我尝试使用这个问题的答案

I am looking at using the antd Carousel, but I've not seen an example that describes how to use goTo(slideNumber, dontAnimate) method.

I have tried to use answers on this question react.js antd carousel with arrows to make goTo method works for me, but it didn't help, I always get carousel ref as null

import * as React from 'react';
import { createPortal } from 'react-dom';
import { Modal, Carousel } from 'antd'

export default class ImagePreviewCarousel extends React.Component<any, any> {

    carousel = React.createRef();

    componentDidMount() {
        console.log(this.carousel);
    }

    render() {
        const { url, imgList } = this.props;
        const orderLayout = document.getElementById('order-layout');
        const applicationLayout = document.getElementById('application');

        return (
            createPortal(<ImageViewer url={url} onClose={this.props.onClose} imgList={imgList} />, orderLayout || applicationLayout)
        )
    }
}

const ImageViewer = (props: IProps) => {
    return (
        <Modal 
            footer={null} 
            visible={props.onClose} 
            onCancel={props.onClose}
            bodyStyle={{ backgroundColor: '#000' }}
            width={'800px'}
        >
            <div style={{
                display: 'flex', 
                flexDirection: 'column', 
                justifyContent: 'center', 
                marginTop: 'auto', 
                marginBottom: 'auto', 
                width: '100%',
                height: '100%', 
                zIndex: 10
            }}>
                <Carousel ref={node => (this.carousel = node)}>
                    {props.imgList}
                </Carousel>
            </div>
        </Modal>
    );
}

result of console.log(this.carousel) always returns null, what am i doing wrong?

p.s react version 16.4.1,

解决方案

antd Carousel is an implementation of react-slick, you can check its API example.

Here is my example using hooks:

import React, { useRef, useState } from 'react';
import { Carousel, Row, InputNumber } from 'antd';


function App() {
  const [slide, setSlide] = useState(0);

  const slider = useRef();

  return (
    <div>
      <Row style={{ marginBottom: 10 }}>
        <InputNumber
          min={0}
          max={3}
          value={slide}
          onChange={e => {
            setSlide(e);
            slider.current.goTo(e);
          }}
        />
      </Row>
      <Row>
        <Carousel
          dots={false}
          ref={ref => {
            console.log(ref);
            slider.current = ref;
          }}
        >
          <div>
            <h3>0</h3>
          </div>
          <div>
            <h3>1</h3>
          </div>
        </Carousel>
      </Row>
    </div>
  );
}

这篇关于React antd 轮播方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！