Reputation: 43
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,
Upvotes: 8
Views: 10938
Reputation: 53994
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>
);
}
Upvotes: 4
Reputation: 20765
You need to pass ref
to your child component like,
<ImageViewer url={url} onClose={this.props.onClose} imgList={imgList} onRef={this.carousel} />
And can access in child component like,
<Carousel ref={props.onRef}>
{props.imgList}
</Carousel>
While printing in componentDidMount
,
componentDidMount() {
console.log(this.carousel); // If this gives you ref object
console.log(this.carousel.current); //This will give you element
console.log(this.carousel.current.value); //This will give you element's value if element has value.
}
Simplified Demo using input.
Upvotes: 0