我正在尝试使用bootstrap切换按钮组来选择平台选项。但是qazxsw poi事件并未被调用。
onChange
我的应用程序使用webpack和以下依赖项
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>
);
}
}
我创建了一个"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
更新1:
在评论的帮助下,我使用[email protected]而不是1.14.4让jsfiddle工作。我还发现我只能以特定的顺序导入库。工作样本 - "bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
如何使用webpack修复订单?
更新2:
我创建了https://codepen.io/hussaintamboli/pen/PdoVvG?editors=1111以使用react + bootstrap4 + webpack4重现问题
来自this github repository ......
“这些按钮的选中状态仅通过按钮上的点击事件进行更新。”
因此,跟踪(从Bootstrap JS)更改按钮状态的唯一方法是单击按钮...
Bootstrap docs
工作演示: 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元素上有div
就是问题,因为无论你在里面点击什么组件都没有从onChange
发射任何change
事件,但即使把它放在div
元素上也不是修理它。
我知道它并不理想,但将input
事件放到onClick
元素上确实有效。
label