小编Dan*_*Kim的帖子

使用链接 React-Bootstrap 控制轮播

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 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

5
推荐指数
0
解决办法
976
查看次数