在 React 开发中，经常需要制作各种工具栏以及其它 UI 组件。而为了让开发者更轻松地制作出漂亮、实用的工具栏，我们推荐一款 npm 包，那就是 react-simple-toolbar。
简介
react-simple-toolbar 是一个轻量级、易用的 React 工具栏组件，可用于展示菜单按钮、搜索框、分页器等。
react-simple-toolbar 包含三种基本工具栏，分别是 Toolbar、Button 和 Input 组件。
其中 Toolbar 组件由多个 Button、Input 组件组成，可以自由控制它们的位置和样式；Button 组件表示一个按钮；Input 组件表示一个输入框。
安装
通过 npm 包管理器，我们可以方便地安装 react-simple-toolbar：
--- ------- -------------------- ------
使用
react-simple-toolbar 的使用非常简单，我们只需要引入并渲染相应组件即可。下面是一个具体的例子：
------ ----- ---- --------
------ - -------- ------- ----- - ---- -----------------------
----- --------- ------- --------------- -
-------- -
------ -
---------
---------------------
------ ---------------- --
----------------------
----------
--
-
-上面的代码中，我们定义了一个名为 MyToolbar 的 React 组件，其中包含 Toolbar、Button 和 Input 三个组件，它们被放置在 Toolbar 中，并展示了一个简单的布局和 UI 效果。
接下来，我们详细介绍一下 react-simple-toolbar 的三个组件，以及它们的使用方法和相关属性。
Toolbar
Toolbar 组件是整个 react-simple-toolbar 的基础组件，它被用来组合多个其他组件。
属性
className: string（可选） - 自定义 CSS 类的名称。
使用
--------- --------------------- ------ ---------------- -- ---------------------- ----------
Button
Button 组件表示一个按钮，用户点击后会触发相应事件。
属性
type: string（可选） - 按钮类型，包括default（默认）、primary、success、warning和danger。disabled: bool（可选） - 禁用按钮。className: string（可选） - 自定义 CSS 类的名称。onClick: func（可选） - 点击事件的回调函数。
使用
------- --------------------------
Input
Input 组件表示一个输入框，用户可以在其中输入任意内容。
属性
type: string（可选） - 输入框类型，包括text（默认）、tel、email、number和password等。placeholder: string（可选） - 输入框的预选内容。disabled: bool（可选） - 禁用输入框。className: string（可选） - 自定义 CSS 类的名称。onChange: func（可选） - 内容改变时的回调函数。onKeyPress: func（可选） - 键盘按下时的回调函数。
使用
------ ------------------- --
结语
在本文中我们介绍了 react-simple-toolbar 这个轻量级、易用的 React 工具栏组件，并且详细讲解了它的使用方法和相关属性以及示例代码，希望对您有所帮助。如果您在使用过程中遇到任何问题，请随时联系我们。感谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/react-simple-toolbar