Bootstrap 数据切换和数据目标不工作

Question

因为我是 Bootstrap 中的新人并且有反应。当我点击添加类别按钮时，我遇到了错误，但没有显示任何内容。我在添加类别按钮上应用了数据切换和数据目标，但它不起作用。

这是我正在使用的代码。 Showroom.js 文件。

import React from "react";

const ShowroomDashboard = () => {
/*********************** 
 * Views
************************/
 const showHeader = () => (
    <div className='bg-dark text-white py-4'>
        <div className = 'container'>

            <div className='row'>
                <div className='col-md-6'>
                    <h1>
                        <i className= 'fas fa-home'> Showroom Dashboard</i>
                    </h1>
                </div>
            </div>
        </div>
    </div>
);

const showActionBtns = () => (
    <div className = 'bg-light my-2'>
        <div className ='container'>
            <div className ='row pb-3'>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-info btn-block' data-toggle= 'modal' data-target= '#addCategoryModal'>
                        <i className ='fas fa-plus'> Add Category </i>
                    </button>
                </div>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-warning btn-block'>
                        <i className ='fas fa-plus'> Add Car </i>
                    </button>
                </div>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-info btn-block'>
                        <i className ='fas fa-money-check-alt'> View Order </i>
                    </button>
                </div>
            </div>
        </div>
    </div>
);

//id will be of same name as data target attribute in add category button
const showCategoryModal = () => (
    <div id='addCategoryModal' className= 'modal'>Inside modal</div>
);

/*********************** 
* Renderer
************************/

return (
    <section>
        {showHeader()}
        {showActionBtns()}
        {showCategoryModal()}
    </section>
);
};

export default ShowroomDashboard;

任何帮助将不胜感激。

Answer 1

您确定您使用的是 Bootstrap 4 吗？它们是从 Bootstrap 版本 4 到版本 5 的一些更改！

例如，在 Bootstrap 5

中，data-toogle 现在是 data-bs-toggle，data-target 现在是 data-bs-target

Bootstrap 数据切换和数据目标不工作

Bootstrap data-toggle and data-target not working

reactjs

bootstrap-4