☰

React のインライン CSS スタイル: a:hover を実装するには? 質問する

tag-icon • tag-icon reactjs
React のインライン CSS スタイル: a:hover を実装するには? 質問する

私はかなり好きですReact のインライン CSS パターンそしてそれを使うことにしました。

ただし、 や類似のセレクターは使用できません:hover。では、インライン CSS スタイルを使用しながら、ホバー時にハイライトを実装する最適な方法は何でしょうか?

#reactjs からの提案の 1 つはClickable、コンポーネントを用意して次のように使用することです。

<Clickable>
    <Link />
</Clickable>

には状態Clickableがありhovered、それを Link に props として渡します。ただし、Clickable(私が実装した方法では) はLinkを でラップして、とをdiv設定できるようにします。ただし、これにより状況が少し複雑になります (たとえば、でラップされた はとは異なる動作をします)。onMouseEnteronMouseLeavespandivspan

もっと簡単な方法はありますか？

ベストアンサー1

onMouseEnter と onMouseLeave が最適だと思いますが、追加のラッパー コンポーネントは必要ないと思います。実装方法は次のとおりです。

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
}

その後、ホバーの状態 (true/false) を使用してリンクのスタイルを変更できます。

おすすめ記事