Как использовать реактивный поповер при наведении? - PullRequest
Новая
       12

Как использовать реактивный поповер при наведении?

0 голосов
/ 09 июля 2019

Я новичок в реакции. Здесь я использую библиотеку под названием reactstrap, в которой 

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
      </div>
    );
  }
}

Теперь, вот что я пытаюсь сделать, когда пользователь hover на самой этой кнопке, тогда только пользователь должен видеть это popover. Так есть ли способ, которым мы можем использовать это при самом наведении?

1 Ответ

1 голос
/ 09 июля 2019

Для этого можно использовать onMouseEnter и onMouseLeave, 

<Button
   id="Popover1"
   type="button"
   onMouseEnter={this.onHover}
   onMouseLeave={this.onHoverLeave}
>
    Launch Popove
</Button>

А функции должны быть, 

onHover = () => {
  this.setState({
    popoverOpen: true,
  })
}

onHoverLeave = () => {
  this.setState({
    popoverOpen: false,
  })
}

Демо

...