Question

我正在尝试使用引导程序的切换按钮组来选择平台选项。但是clang++事件没有被调用。

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

onChange

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

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>
    );
  }
}

更新1：

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

如何使用webpack确定订单？

更新2：

我创建了this github repository来重现react + bootstrap4 + webpack4

的问题。

Answer 1

从Bootstrap docs ...

“这些按钮的选中状态仅通过click事件更新在按钮上。 “

因此，唯一（从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

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

Answer 2

我最初认为可能是上面带有div的{{1}}元素是问题所在，因为不会从onChange触发任何change事件不管您在其中单击了哪些组件，但是即使将其放在div元素上也无法修复它。

我知道这并不理想，但是在input元素上放置onClick事件确实可以。

label

Answer 3

handlePlatformChange将在每次单击按钮时触发两次（<input>一次，<label>一次）。

如果您每次点击只想要1个事件，则可以检查该事件是否具有checked属性。

handlePlatformChange(event) {
  // <input> will have target.checked == true
  if (event.target.checked == null) return null;

  // handle your change here...
}

我遇到了一些React错误，因为我没有<input>的onChange并从上方设置了状态，因此可以通过包含readOnly-{{1} }。

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

3 个答案: