如何使用 Bootstrap 4 弹出框做出反应答案

【问题标题】：How to get react working with Bootstrap 4 popovers如何使用 Bootstrap 4 弹出框做出反应
【发布时间】：2017-11-13 20:58:52
【问题描述】：

我目前正在使用 Draftjs 来装饰一些关键词，这会将它们变成跨度。在我的范围内，我想使用 Bootstrap 4 popover 功能。我添加了一个简单的行，但它不起作用，库等都添加了。

handleClick = (e) => {
  e.preventDefault();
    alert(e.target);
};

ColorComponent = (props) => {
  return (
    <span onClick={this.handleClick} style={this.styles.word}>{props.children}</span>
  );
};

单击时，我希望能够看到一个弹出窗口，如 bootstrap 4 页面上所示。我已经包含了下面的链接。我不想使用独立的库，我想直接编写代码，避免使用插件

https://v4-alpha.getbootstrap.com/components/popovers/

【问题讨论】：

有一些反应库可以帮助你。其中之一是react-bootstrap，这里有很多关于react-bootstrap标签的主题。
我认为您错过了 data-toggle 属性。此外，点击处理程序必须包含 $('#element').popover('show')
如果我没记错的话，React-bootstrap 使用 bootstrap 3

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

首先你需要添加data-toggle、title和data-content属性，然后通过在元素上调用popover()方法来初始化弹出框。

有关 React、Typescript、Webpack 堆栈的解释和示例代码，请参阅此答案： https://stackoverflow.com/a/46801561/924597

【讨论】：