bootstrap-toggle开关显示为复选框

Question

我有一个用bootstrap-toggle制作的ToggleSwitch组件。但是它显示为复选框而不是切换开关。关于如何使它起作用的任何帮助？

ToggleSwitch.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-toggle/css/bootstrap-toggle.css";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          data-toggle="toggle"
          data-on="Ready"
          data-off="Not Ready"
          data-onstyle="success"
          data-offstyle="danger"
        />
      </div>
    );
  }
}

export default ToggleSwitch;

Answer 1

如果您检查控制台，它将显示错误：

未捕获的ReferenceError：在bootstrap-toggle.js：180中未定义jQuery

这是一个旧图书馆。隐式地，它需要旧版本的jQuery。它也需要Bootstrap，最好是3.2版。

因此，请在Bootstrap切换前添加此JavaScript调用它：https://code.jquery.com/jquery-2.1.1.min.js并添加以下CSS：https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

所以这应该起作用。