web-dev-qa-db-ja.com

React JS toggle /ホバー時にクラスを追加

私はanimate.cssライブラリをReactで使用しており、ホバーしたときに要素（ボタン）をPulseに設定しようとしています。ドキュメントとここを調べてみましたが、この単純なタスクを達成する方法。誰かがこれを達成した場合、または参照を見つけた場合は大歓迎です。

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;
javascriptreactjseventsdom-eventsanimate.css
9
Fernando B

コンポーネントで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：フック

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>
  )
}
26
Chase DeAnda