☰

ReactJS を使用したツールチップ div 質問する

tag-icon • tag-icon javascript html reactjs
ReactJS を使用したツールチップ div 質問する

客観的

reactjs を使用してツールチップのように動作させたい div があります。

html

<div>on hover here we will show the tooltip</div>
<div>
    <div class="tooltip_custom">this is the tooltip!!</div>
</div>

ng-show私は の条件付きで を使用する AngularJS に慣れていますが<div>、ReactJS にそのようなバインディングがあるかどうか、または他にこの機能をどのように実行できるか疑問に思っています。

ありがとう

ベストアンサー1

コンポーネントが次のマークアップを返すようにすることができます。

return (
  <div>
    <div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
    <div>
      <div style={tooltipStyle}>this is the tooltip!!</div>
    </div>
  </div>
);

次のように割り当てられますtooltipStyle:

const tooltipStyle = {
  display: this.state.hover ? 'block' : 'none'
}

したがって、ツールチップはコンポーネントの状態に依存するため、ツールチップを表示するにはhandleMouseInコンポーネントhandleMouseOutの状態を変更する必要があります。

handleMouseIn() {
  this.setState({ hover: true })
}

handleMouseOut() {
  this.setState({ hover: false })
}

ここで働いています例。

この記事を読んで、React の学習を始めましょう:Reactで考える。

おすすめ記事