reactjs - Bootstrap 的切换按钮组未在反应中调用 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 (<div className="container">
<div className="btn-group btn-group-toggle" data-toggle="buttons" onChange={this.handlePlatformChange} >
<label className="btn btn-info active">
<input type="radio" name="platform" value="web" autoComplete="off" /> Web
</label>
<label className="btn btn-info">
<input type="radio" name="platform" value="android" autoComplete="off" /> Android
</label>
<label className="btn btn-info">
<input type="radio" name="platform" value="ios" autoComplete="off" /> iOS
</label>
</div>
</div>
);
}
}
我的应用程序正在使用 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 JS)更改的按钮状态的唯一方法是单击按钮...
handlePlatformChange(event) {
var val = event.currentTarget.querySelector("input").value;
this.setState({ currValue: val });
}
render() {
return (
<div>
<div>{this.state.currValue}</div>
<div className="btn-group btn-group-toggle" data-toggle="buttons">
<label className="btn btn-info active" onClick={this.handlePlatformChange}>
<input
type="radio"
name="platform"
value="web"
autoComplete="off"
/>{" "}
Web
</label>
<label className="btn btn-info" onClick={this.handlePlatformChange}>
<input
type="radio"
name="platform"
value="android"
autoComplete="off"
/>{" "}
Android
</label>
<label className="btn btn-info" onClick={this.handlePlatformChange}>
<input
type="radio"
name="platform"
value="ios"
autoComplete="off"
/>{" "}
iOS
</label>
</div>
</div>
);
}
工作演示:https ://codesandbox.io/s/7kkqjy3lqx
当然,一旦获得相关值(从单击的按钮),您总是可以将其传递给其他一些处理逻辑。
推荐阅读
- wpf - 如何使路径旋转到位?
- winapi - SwapMouseButton 不会“拒绝”重新启动
- java - 如何格式化导出的 Vault 私钥以供使用?
- uwp - 如何为 IAsyncOperation 列表实现 when_all
- c - 32位系统调用表入口点如何映射到x86_64中的SYSCALL_DEFINE
- docker - 将 Typo3 放在 Docker 容器上后得到一个空白页
- javascript - 在不刷新的情况下保存时更新表中的数据 (Ajax/JavaScript)
- wordpress - Popper 已加载但无法在 Wordpress 上使用 bootstrap 4
- javascript - 如何禁用或修复 CORS 问题
- html - Grammarly-like spellcheck dropdown on incorrect words in HTML textarea (Angular 8 Frontend)