Как правильно отобразить всплывающее окно после нажатия, используя реагирующий ремень - PullRequest
Новая
       10

Как правильно отобразить всплывающее окно после нажатия, используя реагирующий ремень

1 голос
/ 04 марта 2020

Это то, чего я пытаюсь достичь, используя reactstrap карты .

Я следую этому примеру, чтобы интегрировать его в мой код. Но всплывающее окно не отображается, как показано ниже, после нажатия .

В моем случае у меня есть link, а не button:

popover

Соответствующий код ниже: 

<code>import { Popover, PopoverHeader, PopoverBody } from "reactstrap";

class Sidebar extends React.Component {
  state = {
    ships: []
  };
  async componentDidMount() {
    let response = await Client.getEntries({
      content_type: "cards"
    });
    const ships = response.items.map(item => {
      const {
        // constants.....
      } = item.fields;
      return {
        // constants.....
      };
    });
    this.setState({
      ships
    });
  }

  getFilteredShips = () => {
    // operations .....
  };

  PopoverItem = props => {
    const { id, item } = props;
    const [popoverOpen, setPopoverOpen] = useState(false);
    const toggle = () => setPopoverOpen(!popoverOpen);
  };

  render() {
    return (
      <div className="map-sidebar">
        {this.props.activeShipTypes}
        <pre>
          {this.getFilteredShips().map(ship => (
            <Card className="mb-2">
              <CardImg />
              <CardBody>
                <CardTitle>
                  <h3 className="thick">{ship.name}</h3>
                </CardTitle>
                <Row style={{ marginTop: "20px" }}>
                  <div className="buttoncontainer">
                    <div className="btn btn-cards">
                      <a
                        className="buttonLink"
                        id={"Popover-" + id}
                        href={ship.projectnotes.fields.file.url}
                      >
                        Project Notes
                      </a>
                      <Popover
                        placement={item.placement}
                        isOpen={popoverOpen}
                        target={"Popover-" + id}
                        toggle={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>
                  </div>
                </Row>
              </CardBody>
            </Card>
          ))}
); }} экспортировать боковую панель по умолчанию;

Этот код

Сообщения, с которыми я консультировался, чтобы помочь мне решить проблему, но, к сожалению, безуспешно:

1) этот пост было полезно понять логику c, но она не связана с тем, чего я пытаюсь достичь.

2) Конечно этот источник , который является самым важным и откуда я пытаясь повторить пример.

Спасибо за указание в правильном направлении для решения этой проблемы.

...