Question

我使用react和bootstrap css学习构建网站，我有旋转木马，分开导航。下面是我的轮播的示例代码

class Home extends React.Component {
     mousehover() {
         ... ???? .....
     };
     render() { return (
        <div className="row">
            <div id="carouselExampleIndicators" className="carousel slide col-9" data-ride="carousel">
                <div className="carousel-inner" role="listbox">
                    <div className="carousel-item active">
                        <img className="d-block img-fluid" src="http://northdelawhere.happeningmag.com/wp-content/uploads/banner_sample300x300.jpg"
                            alt="First slide" />
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="http://www.raymiller.cc/thumbnail/exterior-beadboard-paneling-4-texture-plus-indoor-outdoor-siding-panel-beadboard-oak-sample-300-x-300.jpg"
                            alt="Second slide" />
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="..." alt="Third slide" />
                    </div>
                </div>
                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                </a>
                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                </a>
            </div>
            <div className="col-3">
                <ul className="flex-column">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" onmouseover={this.mousehover}>one</li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1">two</li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2">three</li>
                </ul>
            </div>
        </div> 
    )} 
}
React.render(<Home />, document.getElementById('root'));

我正在尝试使用onmousehover为我的列表创建事件，但失败了。任何人都可以帮助我为onmousehover事件提供线索/示例，该事件将滑动到目标轮播（数据滑动到）？

非常感谢你。

Answer 1

查看React文档的SyntheticEvent section，它解释了如何在React中使用onMouseEnter和onMouseLeave等事件：

您的事件处理程序将传递SyntheticEvent的实例，a 围绕浏览器的本机事件的跨浏览器包装器。它有与浏览器的本机事件相同的界面，包括 stopPropagation()和preventDefault()，但活动除外所有浏览器都相同。

也就是说，根据您的使用情况，您最好使用CSS的:hover伪类来实现悬停效果。

反应Onmouseover建议

1 个答案: