npm 包 react-common-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

react-common-input 是一个用于在 React 项目中快速创建输入框组件的 npm 包。它提供了许多常用的输入框组件，如文本框、下拉选择框、多选框等，并且这些组件都已经经过了封装，使用非常方便且灵活，极大地提高了开发效率。

安装

使用 npm 进行安装，命令如下：

npm install react-common-input

使用方法

在需要使用组件的文件中，导入 react-common-input：

import { InputText, Select, Checkbox } from 'react-common-input';

接着，你就可以像使用普通组件一样使用它们了：

<InputText placeholder="请输入用户名" />
<Select options={[{ label: '男', value: 'male' }, { label: '女', value: 'female' }]} />
<Checkbox options={[{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }]} />

组件列表

以下是 react-common-input 提供的组件列表：

InputText

文本框组件，支持输入框字数限制、输入内容校验等功能。

<InputText placeholder="请输入用户名" limit={15} />

Props

名称	类型	是否必须	默认值	描述
value	string	否	''	输入框的值
limit	number	否	null	输入框最大输入字数限制
className	string	否	''	组件的 className
onChange	(value: string) =>	否	null	输入框的 onChange 事件回调函数
onError	(error: string) =>	否	null	输入框值校验错误时的回调函数

校验方法

通过设置 props 中的 onError 属性可以实现输入内容校验功能：

function verifyUserName(value) {
  return /^[A-Za-z0-9]+$/.test(value) ? null : '请输入正确格式的用户名';
}

<InputText placeholder="请输入用户名" onError={verifyUserName} />

其中，校验方法 verifyUserName 的返回值为校验结果，若输入内容正确，则返回 null，否则返回相应的错误提示信息。

Select

下拉选择框组件，支持单选和多选功能。

<Select options={[{ label: '男', value: 'male' }, { label: '女', value: 'female' }]} mode="multiple" />

Props

名称	类型	是否必须	默认值	描述
options	Array<{ value: string, label: string }>	否	[]	下拉选项列表
mode	'single' \| 'multiple'	否	'single'	选择模式
value	string \| string[]	否	''	已经选择的值
onChange	(value: string \| string[]) =>	否	null	选择框的 onChange 事件回调函数
className	string	否	''	组件的 className

Checkbox

多选框组件，支持选择多个选项。

<Checkbox options={[{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }]} />

Props

名称	类型	是否必须	默认值	描述
options	Array<{ value: string, label: string }>	否	[]	多选框选项列表
value	string[]	否	[]	已经选择的值列表
onChange	(value: string[]) =>	否	null	多选框的 onChange 事件回调函数
className	string	否	''	组件的 className

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ------- -------- - ---- ---------------------

-------- ----- -
  -------- --------------------- -
    ------ ---------------------------- - ---- - --------------
  -

  -------- ------------------------- -
    -------------------
  -

  -------- --------------------------- -
    -------------------
  -

  ------ -
    -----
      ---------- -------------------- ---------- ------------------------ --
      ------- ----------- ------ ---- ------ ------ -- - ------ ---- ------ -------- --- --------------- ----------------------------- --
      --------- ----------- ------ -------- ------ ------- -- - ------ --------- ------ -------- --- ------------------------------- --
    ------
  --
-

------ ------- ----

总结

react-common-input 可以极大地提高开发效率，减少代码量，前端开发人员可以利用它进行快速开发、测试和验证，同时也可以学习如何封装复杂的组件，提高代码编写水平。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583bf0