简介
@matejmazur/react-table-form 是一个 React 表单组件，提供了多行表格的数据输入功能，并支持表单验证、添加、删除等常用操作。
安装
使用 npm 或 yarn 安装 @matejmazur/react-table-form：
--- ------- ------ ---------------------------- - - ---- --- ----------------------------
使用
在你的 React 项目中使用该组件：
------ ------ - -------- - ---- --------
------ --------- ---- -------------------------------
-------- ----- -
----- ------ -------- - ----------
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- --- ---- -- -- -- ----------
---
----- ---------- - ------- -- -
---------------------
-----------------
--
------ -
----------
----------
- ------ ----- ---------- ------- --------- ---- --
- ------ ----- ---------- ------ ----- --------- ---- -- --
--
-----------
-------------------
--
--
-
------ ------- ----API
columns
表格的列定义，为数组类型，每个元素包含以下属性：
title：列的标题，为字符串类型。dataIndex：列对应的数据字段，为字符串类型。required：是否必填，为布尔类型，默认为false。type：输入类型，为字符串类型，可选值有'text'、'number'、'select'，默认为'text'。min：输入值的最小值，只对type为'number'的列有效，为数字类型。
注意：使用
select类型时，需要为每个选项设置value属性。
示例：
----- ------- - -
- ------ ----- ---------- ------- --------- ---- --
- ------ ----- ---------- ------ ----- --------- ---- -- --
- ------ ----- ---------- --------- ----- --------- -------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- --
---
--data
表格的数据，为数组类型，每个元素为一行数据，为对象类型，包含与 columns 属性中 dataIndex 对应的属性值。同时，每行数据还包含以下属性：
key：行的唯一标识，为字符串类型，可以为空。errors：行的验证错误信息，为对象类型，包含与columns属性中dataIndex对应的属性值的验证错误信息。
示例：
----- ---- - - - ---- ---- ----- -------- ---- -- -- - ---- ---- ----- ------ ---- -- -- - ---- ---- ----- --- ---- --- ------- - ----- ------- - -- --
onSave
保存表单数据的回调函数，接受一个参数 newData，为更新后的数据。
总结
@matejmazur/react-table-form 是一个功能丰富、易于使用的 React 表单组件，支持表格形式的数据输入、添加、删除、验证等常用操作，为前端开发人员提供了方便快捷的解决方案，值得大家的学习和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5e51ab1864dac67169