reactjs - [我使用的]react-bootstrap的popover是 "the react way"吗？

Question

我正在开发一个 React 应用程序，这是我的第一个应用程序，我正在努力解决如何实现用户交互式弹出窗口。我有一个业务要求，需要一个带有是/否按钮的弹出窗口。此弹出窗口由位于 View 表中的一行中的按钮(“pobtn”)触发:

+- View ---------------------+          +- View ---------------------+
| +- Table ----------------+ |   click  | +- Table ----------------+ |
| | +- Row --------------+ | |    -->   | | +- Row --------------+ | |
| | | ...                | | |   pobtn  | | | ...                | | |
| | +--------------------+ | |          | | +--------------------+ | |
| | +- Row --------------+ | |   ,--------. +- Row --------------+ | |
| | | ...        [pobtn] | | |   | Yes/No |>| ...        [pobtn] | | |
| | +--------------------+ | |   `--------' +--------------------+ | |
| | +- Row --------------+ | |          | | +- Row --------------+ | |
| | | ...                | | |          | | | ...                | | |
| | +--------------------+ | |          | | +--------------------+ | |
| | ...                    | |          | | ...                    | |
| +------------------------+ |          | +------------------------+ |
+----------------------------+          +----------------------------+

View 、表和行都是组件。表数据在 View 中获取并通过 props 推送到 Table，然后流入 Row，我认为这是“正确的方法”，并且是有意义的。那里没有太多本地状态。

问题出在弹出窗口上。我猜，“正确的方法”似乎包括每个按钮旁边的 Popover 组件，并将 Prop 向下推以隐藏/可见。这看起来不太好，但在我看来更接近正确的方法。

但是，react-bootstrap popover(我因为时间原因使用它)似乎并不这样工作:

var content = <MyRowPopoverContent/>;
<OverlayTrigger trigger='click' placement='left' overlay={<Popover>{content}</Popover>
    <button className="btn btn-primary small"><i className="fa fa-trash-o"></i> Delete</button>
</OverlayTrigger>

当您单击触发按钮时，它会创建一个附加到主体的 DIV，并将其自身定位在触发元素旁边，类似于其正常工作方式(非 react )。看起来我可以将 DIV 附加到另一个容器，但这没有很好的记录。无论如何，覆盖内容(即 MyRowPopoverContent)类似于:

this.handleNoClick: function(){
  // Re-click the button to close; gross.
  $('[data-row-id="'+this.props.row.key+'"]').find('.fa-trash-o').parents('button').first().click();
},
this.handleYesClick: function(){
  // Do stuff...update store which would re-render the view.
  // Re-click the button to close; gross.
  $('[data-row-id="'+this.props.row.key+'"]').find('.fa-trash-o').parents('button').first().click();
},
this.render: function(){
  <div>
    <div>Are you sure?</div>
    <input placeholder="Reason"/>
    <button onClick={this.handleYesClick}>Yes</button> <button onClick={this.handleNoClick}>No</button>
  </div>
}

我开始实现handleYesClick函数，尝试进行错误处理、异步事件等，这一切看起来都很粗略，或者至少很脆弱。我想问题是:我需要一个交互式弹出窗口，我该怎么做？弹出窗口似乎是按钮或行的本地状态的一部分，或者可能像大多数事情一样爬到顶部。

由于react-bootstrap已经提供了一个，所以使用它会很好，但我不确定如何将它与其他所有东西“ Hook ”。

更新:如果它是一个简单的静态弹出窗口，那就太好了；通过 props 显示/隐藏它并单击 pobtn 非常简单。我遇到的困难是弹出窗口中的交互式内容 - 执行某些操作(例如更新商店的事件)、显示旋转器、确定某项操作是否有效、显示错误消息或消失。即使单击“否”按钮并使弹出窗口消失也不清楚(我目前使用 jQuery 和 .click() 按钮再次找到它。)通过 parent 的 Prop 似乎很可怕......

Answer 1

假设您将弹出窗口封装到 PopoverMenu 组件中。这是一个 React 友好的模式，其中父级处理其子级的事件:

var Table = React.createClass({
  handlePopoverClick(selection, meta) {
    // selection - the selection ('Yes' or 'No' in your case)
    // meta - anything you want to know about the caller
  },
  render: function() {
    var open = /* boolean logic to determine if popover is open or closed* /;
    // key idea is to pass the child a handler from the parent
    <PopoverMenu handler={this.handlePopoverClick} open={open} ... />
    ...
  }
});

var PopoverMenu = React.createClass({
  handleClick: function(selection, meta) {
    this.props.handler(selection, meta);
  },
  render: function() {
    ...
    //somewhere you render the 'Yes' Button of this popover
    <Button onClick={this.handleClick.bind(this, 'Yes', {row: 2})} />
  }
});

PopoverMenu 组件是无状态的；它只知道足以渲染。它的处理程序接收点击事件，然后根据需要调整 PopoverMenu 的属性。神奇之处在于 .bind，它允许您注入(inject)特定于调用者的信息以供处理程序使用react。 (您可以想象 .bind 发生在 map 调用中，其中 Yes 和 {row :2} 是动态变量。)请注意，您可以使用父级中的单个处理程序处理所有弹出窗口选择，并且您可以轻松跟踪任何调用的等待/成功/失败状态，作为父级状态(例如行)的一部分。这可能看起来很可怕，但说逻辑需要存在于某个地方:)并且如果那个地方不是子元素就更好了，因为 React 方式是无状态的子元素。当信息从父级流向子级时，状态自然会成为 props。

也就是说，如果你的父组件做了太多的簿记工作，而你没有从子组件中获得干净、独立的行为，你可以将逻辑下推到子组件中，这通常会以子组件的可重用性为代价。子进程处理自己的打开/关闭状态和等待/错误/成功状态既合理又可能。如果您走这条路线，您可以使用的一种模式是将子级置于等待状态，直到并且除非您通过 props 从父级收到匹配值。例如，如果用户选择需要回调的菜单“X”，则子级会执行 setState{ Selection: 'X'} 并等待父级通过 props 进行确认(这反射(reflect)了状态)商店):

if (this.state.selection !== this.props.selection) {
  //render component as waiting
} else {
  //render as normal
}

关于弹出窗口的打开/关闭状态，如果您使用像 ButtonDropdown 这样的组件来管理它自己的打开/关闭状态，会更容易。 (您可能必须在下拉列表中设置一个空的 onSelect 处理程序，以便它在选择时自动关闭。)