>

저는 반응이 처음입니다. 여기에 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

    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,
      })
    }
    
    

    데모

  • 이전 rust - Vec 참조를 Vec 값으로 변환하는 관용적 방법은 무엇입니까?
  • 다음 c# - Windows Form의 모든 데이터를 txt 파일로 쓰려면 어떻게합니까? [닫은]