我正在使用带有React的animate.css库并尝试设置一个元素(按钮)以便在悬停时产生脉冲。试图浏览文档和这里,但无法找到实现这个简单任务的方法。如果有人达到了这一点或发现参考将非常感激
class App extends Component {
constructor(props) {
super(props);
this.handleHover = this.handleHover.bind(this);
}
handleHover(){
this.setState({
isHovered: !this.state.isHovered
});
}
render() {
const btnClass = this.state.isHovered ? "pulse animated" : "";
return (
<div>
<button className={btnClass} onMouseEnter={this.state.handleHover} onMouseLeave={this.state.handleHover}>Test</button>
</div>
);
}
}
export default App;
答案 0 :(得分:22)
您可以在组件上使用onMouseEnter
和onMouseLeave
事件,并相应地切换课程。
constructor(){
super();
this.state = {
isHovered: false
};
this.handleHover = this.handleHover.bind(this);
}
handleHover(){
this.setState(prevState => ({
isHovered: !prevState.isHovered
}));
}
render(){
const btnClass = this.state.isHovered ? "pulse animated" : "";
return <button className={btnClass} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></button>
}
更新05/07/19:Hooks
import React, { useState } from 'react';
export default function Component () {
const [hovered, setHovered] = useState(false);
const toggleHover = () => setHovered(!hovered);
return (
<button
className={hovered ? 'pulse animated' : ''}
onMouseEnter={toggleHover}
onMouseLeave={toggleHover}
>
</button>
)
}
答案 1 :(得分:1)
如何使用css:hover属性?通过将css文件中的hover类部分更改为使用:hover而不是react,这对我来说更好。
我尝试使用以上建议,但反应似乎不够快,因此如果鼠标在按钮上缓慢移动,状态将变为错误。