引导程序的切换按钮组未在反应中调用onChange事件

我试图利用引导程序的切换按钮组来选择平台选项。但是该onChange事件没有被调用。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.handlePlatformChange = this.handlePlatformChange.bind(this);
  }

  handlePlatformChange(event) {
    /* THIS DOES NOT GET CALLED */
    console.log(event.target.value);
  }

  render() {
    return (

      

        
           Web
        
        
           Android
        
        
           iOS
        
      
    
    );
  }
}

我的应用程序正在使用webpack和以下依赖项

"dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "express": "^4.16.3",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "popper.js": "^1.14.3",
    "query-string": "^6.1.0",
    "react": "^16.4.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1"
  },

我创建了一个jsfiddle（仅包含相关库）来重现该问题。

"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",

更新1：

在注释的帮助下，我使用popper.js@1.14.3而不是1.14.4使jsfiddle工作。我还发现我只需要按特定顺序导入库。工作示例-https: //codepen.io/hussaintamboli/pen/PdoVvG?editors=1111

如何使用webpack确定订单？

更新2：

我创建了这个github存储库以使用react + bootstrap4 + webpack4重现该问题

从Bootstrap文档 ...

“仅通过按钮上的单击事件来更新这些按钮的选中状态。”

因此，跟踪（从Bootstrap JS）更改的按钮状态的唯一方法是单击按钮。

  handlePlatformChange(event) {
    var val = event.currentTarget.querySelector("input").value;
    this.setState({ currValue: val });
  }

  render() {
    return (
      

        
{this.state.currValue}
        

          
            {" "}
            Web
          
          
            {" "}
            Android
          
          
            {" "}
            iOS
          
        
      
    );
  }

工作演示：https : //codesandbox.io/s/7kkqjy3lqx

当然，一旦获得了相关值（从单击的按钮），您就可以始终将其传递给其他处理逻辑。