npm 包 @beisen-phoenix/field-input 使用教程

介绍

@beisen-phoenix/field-input 是一个基于 React 的前端输入框组件，提供了丰富的特性和灵活的配置。可以用于表单等多种场景。

安装

使用 npm 安装：

npm install @beisen-phoenix/field-input

使用

首先引入组件：

import FieldInput from '@beisen-phoenix/field-input';

然后在 render 函数中使用：

<FieldInput
  type="text"
  label="姓名"
  name="name"
  value={this.state.name}
  onChange={this.handleNameChange}
/>

以上代码将展示一个带标签和值的文本输入框，如下图所示：

FieldInput 支持的属性：

• type: 输入框类型，默认为 text
• label: 标签名称，可以为字符串或者 JSX 元素
• name: 输入框的 name 属性
• value: 输入框的值
• onChange: 输入框值改变的回调函数

type 属性支持的类型包括：text, password, number, email, url, tel, search, date, time, datetime-local。

特性

提示文字

可以设置输入框的提示文字：

<FieldInput
  type="text"
  label="手机"
  name="phone"
  placeholder="请输入手机号码"
/>

如下图所示：

验证

可以设置输入框的验证规则：

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

以上代码将会在输入框下方展示一条错误信息，当输入框的值不符合规则时，错误信息将会显示，如下图所示：

验证规则需要传入一个数组，每个数组元素为一个对象，包含 validator 和 message 两个属性。validator 属性为一个函数，用于验证输入框的值是否符合要求，返回值为 true 或 false。message 属性为验证失败时的错误提示消息。

长度限制

可以限制输入框的最大长度和最小长度：

<FieldInput
  type="text"
  label="用户名"
  name="username"
  maxLength={20}
  minLength={6}
/>

如下图所示：

自定义样式

可以自定义输入框的样式：

<FieldInput
  type="text"
  label={<span style={{ color: 'red' }}>密码</span>}
  name="password"
  style={{ borderBottom: '1px solid red', outline: 'none' }}
/>

如下图所示：

自定义组件

可以通过 render 属性自定义输入框的组件，例如可以使用 Ant Design 的 Input 组件替换默认的文本输入框：

import { Input } from 'antd';

<FieldInput
  type="text"
  label="用户名"
  name="username"
  render={props => <Input {...props} />}
/>

总结

@beisen-phoenix/field-input 是一个实用性强、灵活配置的前端输入框组件。开发人员可以自由选择它提供的特性，自定义样式和组件，让表单开发更加便捷和舒适。

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