Question

我正在尝试使用不同的React弹出库。我发现reactjs-popup并开始使用codesandbox。我在https://codesandbox.io/s/pp60zjkxlj

处创建了环境分支

当我单击第一个（或第二个）按钮时，它将显示相应的弹出窗口。我想要的是这样，当我单击其他按钮时，它将显示该按钮的弹出窗口，并隐藏任何其他可见的弹出窗口。目的是在任何时候屏幕上都只能看到一个弹出窗口。

此库可能吗？

请参见https://codesandbox.io/s/pp60zjkxlj

Answer 1

在单击第一个按钮时具有一个弹出状态，将状态设置为第一个按钮并根据状态

Answer 2

我会研究Portals，在这里您可以使用位于希望使用它的jsx之外的门户。

imo是实现模式的最佳方法，我认为并不需要过多地向您的项目中添加另一个依赖项，而只需按照您的需求创建一个依赖项即可。

Answer 3

您需要将道具传递到弹出窗口中，以告知何时打开和何时不打开。

您的组件应该为每个弹出框设置state或传递给道具以告诉弹出框何时显示。您可以在构造函数中设置默认状态，并在打开新Popover设置新状态之前传播这些默认状态。这就是我处理模态的方式。

  constructor(props) {
    super(props);
    this.state = {
      vendor: {} // Just showing my default state this gets set and this.defaultState is spread after my fetch request completes in componentWillMount()
    };
    this.defaultState = {
      isPopoverOpen: {
        // ---- Default Popover booleans can go here
        editVendor: false
      }
    };
  }

控制状态中Popover状态的实际功能。

// onClick of element would be onClick={this.handleTogglePopover('editVendor')}

  handleTogglePopover = id => { 
    const currentState = Object.assign({}, this.state);
    this.setState({
           currentState,
           ...this.defaultState, // spreading default will set everything to false
           isPopoverOpen: {
              [id]: true // then the newly clicked to true
       }
    });
  };

使用ReactJS Popup，如何使其一次只显示一个弹出窗口？

3 个答案: