Question

我是新手做出反应并且一直试图找出为什么我的React Bootstrap Carousel在我使用导航箭头时工作正常，但是当我添加间隔属性时，轮播只会前进一张幻灯片然后它从不再次调用onSelect方法。

这是设置间隔的完整html。它在幻灯片2上停止，但您可以向前和向后使用导航，它可以工作。此外，将间隔设置为null可以完全向前和向后导航幻灯片。

React Controlled Carousel演示是此代码的基础，我没有看到添加自动幻灯片间隔功能所需的任何其他功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Bootstrap Carousel Demo</title>
<!-- styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<style>
	.carousel
	{
		margin-bottom: 30px;
		margin-left: auto !important;
		margin-right: auto !important;
		height: 500px;
		width: 900px !important;
	}
	
	.carousel-control
	{
		/* opacity: 0 !important; */
		width: 5% !important;
		height: 100% !important;
		margin-bottom: 30px !important;
	}
	
	.carousel-control:focus, .carousel-control:hover 
	{
	    color: #2D2D2D !important;
	}
</style>
<!-- Scripts -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.5.10/prop-types.js"></script>  
</head>
<body>
<div id="application"></div>

<script>
"use strict";
		
class FrontPageCarousel extends React.Component 
{
	static get propTypes() {
		return {
			slides: PropTypes.array.isRequired
		};
	}

	static get defaultProps() {
		return {
			slides: [
				{key: 0, index: 0, direction: '', imgSrc: 'img/carousel.png', capTitle: 'Slide One', capDesc: 'Slide One Description', alt: '900 x 500 Image', active: false },
				{key: 1, index: 1, direction: '', imgSrc: 'img/carousel.png', capTitle: 'Slide Two', capDesc: 'Slide Two Description', alt: '900 x 500 Image', active: false },
				{key: 2, index: 2, direction: '', imgSrc: 'img/carousel.png', capTitle: 'Slide Three', capDesc: 'Slide Three Description', alt: '900 x 500 Image', active: false }
			]
		};
	}
	
	constructor(props,context) 
	{		
			super(props);
			this.state={
				index: null,
				direction: null
			};

			this.handleSelect = this.handleSelect.bind(this);
	}
	
	handleSelect(selectedIndex, event)
	{		
		this.setState({
			index: selectedIndex,
			direction: event.direction
		});
	}

	render() 
	{
		var _this = this;
		
		var slides = this.props.slides.map(function(s, index) 
		{
			if(index === _this.state.index)
			{
				s.active = true;
				return React.createElement(ImageSlide, s);
			}
			else
			{
				s.active = false; 
				return React.createElement(ImageSlide, s);
			}
		});
		
		return (
			React.createElement(
				ReactBootstrap.Carousel,
				{ 
					activeIndex: this.state.index, 
					defaultActiveIndex: 0,
					direction: this.state.direction, 
					onSelect: this.handleSelect,
					interval: 1000
				},
				slides
			)
		)
	}
};

/* carousel item */
class ImageSlide extends React.Component
{
	static get propTypes() {
		return {
			active: PropTypes.bool.isRequired,
			index: PropTypes.number.isRequired,
			direction: PropTypes.string,
			alt: PropTypes.string,
			imgSrc: PropTypes.string.isRequired,
			capTitle: PropTypes.string,
			capDesc: PropTypes.string
		};
	}

	constructor(props)
	{
		super(props);
		this.state = {
				active: this.props.active,
				index: null,
				direction: null
		};
	}

	componentWillReceiveProps(nextProps)
	{
		this.setState({
			active: nextProps.active, 
			index: nextProps.index, 
			direction: nextProps.direction
		});
 	}
	
	render () 
	{
		return (
			React.createElement(
				ReactBootstrap.Carousel.Item,
				{
					active: this.state.active, 
					index: this.state.index,
					direction: this.state.direction
				},
				React.createElement(
					'img',
					{
						alt: this.props.alt, 
						src: this.props.imgSrc 
					},
					null
				),
				React.createElement(
					ReactBootstrap.Carousel.Caption,
					null,
					React.createElement(
						"h3",
						null,
						this.props.capTitle
					),
					React.createElement(
						"p",
						null,
						this.props.capDesc
					)
				)
			)
		)
	}
}

const fpCarousel = React.createElement(FrontPageCarousel, null);

ReactDOM.render(
	fpCarousel,
	document.getElementById("application")
);
</script>
</body>
</html>

React Bootstrap Carousel Interval仅推进一张幻灯片

0 个答案: