Группа переключателей Bootstrap не вызывает событие onChange в реакции

Question

Я пытаюсь использовать группу переключателей начальной загрузки, чтобы выбрать опцию платформы.Но событие 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>
    );
  }
}

Мое приложение использует веб-пакет и ниже зависимости

"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",

Update-1:

С помощью комментариев я заставил jsfiddle работать, используя popper.js@1.14.3 вместо 1.14.4.Я также обнаружил, что мне нужно импортировать библиотеки только в определенном порядке.Рабочий образец - https://codepen.io/hussaintamboli/pen/PdoVvG?editors=1111

Как исправить заказ с помощью веб-пакета?

Обновление-2:

Я создал этот githubрепозиторий для воспроизведения проблемы с реакцией + bootstrap4 + webpack4

Answer 1

Из документов Bootstrap ...

"Проверенное состояние для этих кнопок обновляется только через событие нажатия на кнопке. «

Следовательно, только способ отслеживания (из 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 с onChange, поскольку с div не будет происходить событие change независимо от того, какие компоненты вы нажимаете внутри него, но даже если поместить его на элементы input, это не исправить.

Я знаю, что это не идеально, но помещение события onClick в элементы label работает.

return (
  <div className="container">
    <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>
);