介绍
@aditm1996/react-toggle-component 是一个 React 组件，可以用于快速创建开关按钮。该组件支持自定义样式和回调函数，可实现多种功能。
安装
使用 npm 安装：
npm install @aditm1996/react-toggle-component
或者使用 yarn 安装：
yarn add @aditm1996/react-toggle-component
使用
使用 @aditm1996/react-toggle-component 非常简单。只需要将其引入并渲染到页面上即可。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- ------------------------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- ------------ - -- -- -
-------------------------
-
------ -
-------
-------------------
-----------------------
--
--
-
------ ------- ----这个例子创建了一个 Toggle 组件，并将其初始化为未选中状态。当开关按钮被点击时，组件状态会更新并触发回调函数。
自定义样式
@aditm1996/react-toggle-component 支持自定义样式。可以设置开关按钮的外观、背景和边框颜色等。以下是一个示例：
<Toggle
checked={isChecked}
onChange={handleToggle}
offStyle={{ background: '#ddd' }}
onStyle={{ background: '#5cb85c' }}
offHandleStyle={{ borderColor: '#ccc' }}
onHandleStyle={{ borderColor: '#5cb85c' }}
/>这个例子将开关未选中状态时的背景颜色设为灰色，选中状态时的背景颜色设为绿色。同时，设置未选中状态时的边框颜色为灰色，选中状态时的边框颜色为绿色。
回调函数
@aditm1996/react-toggle-component 也支持回调函数。可以在开关按钮状态改变的时候触发一些操作。以下是一个示例：
<Toggle
checked={isChecked}
onChange={() => {
handleToggle();
console.log('toggle button is clicked');
}}
/>这个例子当开关按钮被点击时，不仅改变了开关按钮的状态，还在控制台上输出了一条日志信息。
总结
@aditm1996/react-toggle-component 是一个非常便利和有用的 React 开发工具，可用于快速创建开关按钮。本文介绍了该组件的用法、自定义样式和回调函数。希望这篇文章能对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135881