我有一个使用 bootstrap-toggle
制作的 React 组件。但它显示为复选框而不是切换开关。关于如何使其工作有任何帮助吗?
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;
最佳答案
JavaScript 文件的调用顺序可能有问题。
对于 CSS 调用必要的文件:
- Bootstrap 4
- Bootstrap4-切换
对于 JavaScript,请按以下顺序调用文件:
- jQuery slim
- Bootstrap 4
- Bootstrap4-切换
工作片段:
const element = (
<div className="toggle-switch">
<input
type="checkbox"
data-toggle="toggle"
data-on="Ready"
data-off="Not Ready"
data-onstyle="success"
data-offstyle="danger"
/>
</div>
);
ReactDOM.render(
element,
document.getElementById('app')
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"/>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
关于javascript - 引导切换开关显示为复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60261288/