因此,基本上,当我将鼠标悬停在h1的“ drive”选项上时,我希望显示一个包含其他几个详细选项的div容器。然后,如果我单击另一个h1的“ ride”选项,则我希望同时显示具有更多详细信息和选项的div。一次只能选择一个,骑行/驾驶,但是如果我将鼠标悬停在骑车上,则显示的div需要一直停留到鼠标离开div为止,如果我将鼠标悬停在驱动器上,则需要出现驱动器div 。希望你们能提供帮助!这是我的代码
import React, { Component } from 'react';
import './App.css';
class Header extends Component {
render() {
return (
<div className="Nav">
<header className="Nav-header">
<h1 className="Nav-title">Halcon</h1>
<p className="Nav-drive"><a href="*" className="Nav-link" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}>Drive</a></p>
<p className="Nav-seperator">|</p>
<p className="Nav-ride"><a href="*" className="Nav-link">Ride</a></p>
</header>
// Div i want to appear if Drive is hovered
<div className="Drive-toggle">
<h3>Why drive with us?</h3>
<h3>Safety</h3>
<h3>Requirements to Drive</h3>
<h3>Driver App</h3>
<h3>Driver - Log In</h3>
</div>
// Div i want to appear if Ride is hovered
<div className="Ride-toggle">
<h3>Why drive with us?</h3>
<h3>Safety</h3>
<h3>Requirements to Drive</h3>
<h3>Driver App</h3>
<h3>Driver - Log In</h3>
</div>
</div>
);
}
}
export default Header;
您可以使用state
来存储的布尔值hovered
,并使用onMouseEnter
和onMouseLeave
来更新state
。
然后,您可以有条件地render
设置样式,CSS
类或组件。
这是一个小的运行示例:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
hovered: false
};
}
onMouseEnter = e => {
this.setState({ hovered: true });
};
onMouseLeave = e => {
this.setState({ hovered: false });
};
render() {
const { hovered } = this.state;
const style = hovered ? { backgroundColor: "#333", color: "#fff" } : {};
return (
<div>
<div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
Hover over me!
</div>
<hr />
<div style={style}>Was it hovered?</div>
<hr />
{hovered && <div>Yes!!</div>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句