npm 包 form-material-ui 使用教程

在前端开发中，表单是经常使用的元素之一。为了优化开发效率和提高用户体验，现有很多成熟的表单库和组件。而其中一款比较优秀的表单库就是 form-material-ui。本文将详细讲解这个 npm 包的使用方法，并且结合示例代码进行说明。

为什么使用 form-material-ui？

• Material UI 风格：form-material-ui 样式风格遵循 Material UI 样式风格，使表单整体看起来更加美观易用。
• 简单易用：使用 form-material-ui 调用组件非常简单，只需要几个配置项即可完成表单的构建，而且还支持自定义表单域。
• 数据校验：form-material-ui 支持多种数据校验规则，例如必填项，数字类型，手机号等。同时也支持自定义校验规则，能够满足各种表单数据校验需求。
• 高度可扩展：form-material-ui 支持高度自定义表单域，可以通过 React 组件来扩展原有的表单组件。同时也方便与其他第三方库和组件进行集成。

安装和使用

使用 npm 安装 form-material-ui：

npm install form-material-ui

form-material-ui 支持以传入配置对象的方式创建表单，支持表单数据校验、提交数据等功能。

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

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

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

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

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

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

上面的例子中，我们使用 useState 定义 values 和 setValues，其中 values 存储表单数据，setValues 用户更新表单数据。表单提交时，我们通过 console.log() 打印出表单数据。

这里我们仅仅使用了 TextField 和 SubmitButton 很基础的两个组件，下面将会介绍更多组件。

组件列表

1. Form

Form 是表单的顶层组件，它将内部的表单域组件包含在内，并实现了相关的校验逻辑。Form 内部需要包裹至少一个表单域组件，否则自动抛出错误。同时还需要传入相关配置项。

<Form onSubmit={handleSubmit} initialValues={initialValues}>
  {/* 表单域组件 */}
</Form>

属性

方法

2. TextField

TextField 组件是表单封装中常常使用的一个文本输入框组件，支持常用的表单校验属性。例如必填、最大值、最小值、正则表达式等。通过传入 name 属性决定输入框对应的 key 值，通过 onChange 执行数据更新操作。

<TextField
  name="username"
  label="用户名"
  required
  error={Boolean(errors.username)}
  helperText={errors.username}
  onChange={handleChange}
/>

属性

3. Checkbox

Checkbox 组件是一种常见的表单域类型，常常被用于表示用户是否同意协议、阅读条款等场景中。

<Checkbox
  name="checked"
  label="点击同意协议"
  onChange={handleChange}
/>

属性

4. Select

Select 组件可以实现下拉式选择效果，例如性别、出生年月、国家和地区等场景。

<Select
  name="country"
  label="国家"
  options={['China', 'United States', 'Russia']}
  onChange={handleChange}
/>

属性

5. RadioGroup

RadioGroup 组件为类似于复选框组的枚举型组件，常常用于表示单选框选项，例如性别、新旧、定期存款等场景。

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

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

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

属性

6. DatePicker

DatePicker 常常用于用户填写日期，例如出生日期、预约日期等场景。

const [date, setDate] = useState(new Date());

const handleChange = (date) => {
  setDate(date);
};

<DatePicker name="date" label="选择日期" value={date} onChange={handleChange} />

属性

自定义表单校验规则

form-material-ui 支持自定义表单校验规则，可以通过传入字符串或者函数来自定义校验规则。

字符串规则

例如，下面的代码定义了一个名字必须为长度大于等于5的规则：

const rules = { 
  name: "length: {minimum: 5}", 
};

<Form onSubmit={handleSubmit} initialValues={{}} validate={rules}>
  {/* 表单域组件 */}
</Form>

• length: {is | minimum | maximum | equalTo: number}

除了 is 之外，三个校验规则均需要在大括号里面指定必填属性，例如：minimum: 3, maximum: 14, equalTo: 3。

自定义函数

自定义函数的形式为：

const customFunc = (value) => {
  if (!/^[a-zA-Z]+$/.test(value)) {
    return "Name should only contain alphabets";
  }
};

自定义校验函数返回值有两种：

• 返回一个字符串，表示校验失败，提供错误提示信息。
• 返回任意非字符串类型值，表示校验成功。

自定义校验规则可以通过 validators 属性传入。

const validators = {
  custom: customFunc,
};

<Form onSubmit={handleSubmit} initialValues={{}} validators={validators}>
  {/* 表单域组件 */}
</Form>

总结

本文介绍了

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