ReactBootstrapでOverlayTriggerを使ったTooltipをフォーカスを得た時に隠す

React + react-bootstrapの時、ホバーしていたツールチップを、クリックしたら消す、みたいな処理を書きたい時のメモ。ポイントは、OverlayTriggerのtriggerを、[‘hover’, ‘focus’]とnullで切り替えて、refsを使って直接hide()を呼び出すこと。ちなみにmanuallyに呼び出したい時はthis.refs.tooltipTrigger.show()とかでも呼べる。

onFocus (e) {
  this.setState({
    editing: true
  }, () => {
    this.refs.tooltipTrigger.hide()
  })
}

onBlur (e) {
  this.setState({
    editing: false
  })
}

const tooltip = (
  <Tooltip id='tooltip'>
    ここをクリックして編集
  </Tooltip>
)

<OverlayTrigger
  ref='tooltipTrigger'
  overlay={tooltip}
  trigger={this.state.editing ? null : ['hover', 'focus']}>
  <FormControl
    componentClass='input'
    onFocus={this.onFocus}
    onBlur={this.onBlur}
    />
</OverlayTrigger>

Pocket

Tweet