React UI Input Control 是一个 React 组件库，它提供了多种输入控件，包括输入框、下拉菜单、单选框、多选框等。使用这个组件库，可以快速构建出漂亮的输入界面，提高用户体验。
安装
使用这个组件库前，首先需要安装它：
npm install reactui-inputcontrol
使用
安装完成后，我们就可以在代码中引入组件库并使用其中的组件。比如，如果我们要使用一个输入框，可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------------
------ ------- -------- ------------- -
------ -
-------------------
----------------
-------------
----------- -- ----------------------------
--
--
-这里我们使用了 InputControl.Input 这个组件来创建一个输入框。它有三个属性：
label：输入框前面的标签；value：输入框的初始值；onChange：输入框的改变事件处理函数。
你可以像上面那样将这些属性传递给组件，但是，如果你要创建很多输入框，那么这样做会很繁琐。React UI Input Control 在这方面提供了很多便利。
表单生成器
React UI Input Control 提供了一个表单生成器，它可以根据一个对象生成一个表单。比如，这是一个用户信息的对象：
const user = {
name: 'alice',
age: 20,
gender: 'female',
}我们可以使用表单生成器快速生成一个表单：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------------
----- ---- - -
----- --------
---- ---
------- ---------
--
----- ---------- - -
-
----- -------
------ -------
----- -------
--
-
----- ------
------ ------
----- ---------
--
-
----- ---------
------ ---------
----- --------
-------- -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
--
--
--
------ ------- -------- ------------- -
------ -
------------------
-------------------
------------
----------------------
--
--
-这里我们使用了 InputControl.Form 这个组件来生成表单。它有三个属性：
config：表单配置，一个数组，每个元素代表一个字段；value：表单的初始值，一个对象，属性是字段名，值是字段的值；onChange：表单的改变事件处理函数。
表单生成器支持的字段类型：
text、password、email、url、tel、search：文本输入框；textarea：多行文本输入框；number、range：数值输入框；date、time、datetime、month、week：日期时间输入框；select：下拉菜单；radio：单选框；checkbox：多选框。
样式
React UI Input Control 提供了默认的样式，如果你不需要定制样式，可以直接使用默认的样式。如果你需要定制样式，有两种方法：
- 使用
className属性来添加自定义类名，然后通过 CSS 来定制样式； - 通过
style属性来直接添加样式对象，比如：
<InputControl.Input
style={{ border: '1px solid red' }}
// ...
/>示例代码
这是一个完整的示例代码，演示了如何使用 React UI Input Control 构建一个表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------------
----- ---- - -
----- --------
---- ---
------- ---------
--
----- ---------- - -
-
----- -------
------ -------
----- -------
--
-
----- ------
------ ------
----- ---------
---- --
---- ----
--
-
----- ---------
------ ---------
----- --------
-------- -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
--
--
--
------ ------- -------- ------------- -
----- ------------ - ------- -- -
-----------------------
------------------
--
------ -
----- ------------------------
------------------
-------------------
------------
----------------------
--
------- ---------------------------
-------
--
-这个表单包含了一个名字输入框、一个年龄输入框和一个性别单选框。当表单提交时，会在控制台输出用户信息对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005542b81e8991b448d17e6