我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件(NavBar 和 Carousel 的父组件)中的 click 方法,它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下 Link 后移动幻灯片的方法一无所知。当我最初设置 activeIndex 时,我无法让它正确收听作为道具传递的索引,并且 onSelect 处理程序也基本上什么都不做。
更新:HomePage => 刚刚向状态添加了方向以反映下面轮播中更新 v2 的变化。
class HomePage extends Component {
constructor(props){
super(props);
this.state = {index: '0', direction: null};
}
handleclick = (i) => {
this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
}
render() {
return (
<Container className='containerCustom d-flex h-100 w-100' fluid>
<Row className='fullscreen-bg h-100 w-100'>
<video loop autoPlay className='fullscreen-bg_video w-100 h-100'>
<source src={background} type='video/mp4'/>
</video>
</Row>
<Row className='flex-fill w-100 navrow' noGutters>
<Col …Run Code Online (Sandbox Code Playgroud) javascript reactjs react-bootstrap react-props controlled-component