对鼠标悬停建议做出反应

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 事件的线索/示例，该事件将滑动到目标轮播(数据滑到)？

谢谢。

Answer 1

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

您的事件处理程序将传递SyntheticEvent的实例，一个 围绕浏览器本机事件的跨浏览器包装器。它具有 与浏览器的本机事件相同的界面，包括stopPropagation()和preventDefault()，除了事件工作 在所有浏览器中都相同。

---

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