Когда я пытаюсь сделать реагировать всплывающий пример его не работает

Question

Я пытаюсь сделать этот пример всплывающего окна с реакцией, но оно не работает.

https://github.com/JakeGinnivan/react-popout#readme

Пример внизу .

import React from "react"
import Popout from "react-popout"

class PopupLogin extends React.Component {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({isPoppedOut: true});
  }

  popoutClosed() {
    this.setState({isPoppedOut: false});
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout title='Window title' onClosing={this.popoutClosed}>
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}
export default PopupLogin

Это должно выглядеть как http://jake.ginnivan.net/react-popout/. Но по моему вывод выглядит так.

Answer 1

Вы забыли добавить текст в span, в соответствии с их документами, поэтому в результате не было ссылки, следовательно, onClick не было запущено. Вы можете оформить ссылку в соответствии с вашими потребностями

Песочница: https://codesandbox.io/s/react-example-vxtu9

import React from "react";
import Popout from "react-popout";
import ReactDOM from "react-dom";

class PopupLogin extends React.Component {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({ isPoppedOut: true });
  }

  popoutClosed() {
    this.setState({ isPoppedOut: false });
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout
          url="popout.html"
          title="Window title"
          onClosing={this.popoutClosed}
        >
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = (
        <span
          onClick={this.popout}
          className="buttonGlyphicon glyphicon glyphicon-export"
        >
          Open
        </span>
      );
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}
ReactDOM.render(<PopupLogin />, document.getElementById("root"));

Answer 2

Похоже, что в коде документации отсутствует текст. Добавьте (pop window out) в всплывающее окно .

import React from "react";
import Popout from "react-popout";

class PopupLogin extends React.Component {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({ isPoppedOut: true });
  }

  popoutClosed() {
    this.setState({ isPoppedOut: false });
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout title="Window title" onClosing={this.popoutClosed}>
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = (
        <span
          onClick={this.popout}
          className="buttonGlyphicon glyphicon glyphicon-export"
        >
          <a
            style={{
              textDecoration: "underline",
              color: "blue",
              cursor: "pointer"
            }}
            onClick={this.popout}
          >
            (pop window out)
          </a>
        </span>
      );
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}
export default PopupLogin;