简介
react-inline-editable-field 是一个基于 React 的编辑器组件，可用于实现行内编辑功能。它提供了一个可编辑的标签，用户可以通过双击该标签来进入编辑模式，编辑完成后按下 Enter 或 ESC 键即可退出编辑模式。
该组件提供了一系列事件以及可自定义的样式，同时还支持多种类型的输入（包括表单控件）。
安装
使用 npm 进行安装：
npm install react-inline-editable-field
使用
导入组件：
import InlineEditableField from 'react-inline-editable-field';
在组件中使用该组件：
<InlineEditableField
value="Hello"
onEdit={(newValue) => console.log(`New Value: ${newValue}`)}
/>设置 value 属性来指定初始文本内容，设置 onEdit 属性来处理编辑完成后的文本。
API
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | string | 初始文本内容。 | |
| onEdit | function | 处理编辑完成后的文本。 | |
| inputType | string | 'text' | 输入类型。可选值包括：text, number, date, datetime-local, email, month, password, search, tel, time, url, week，以及任何表单控件的名称（例如 checkbox）。 |
| inputProps | object | {} | 表单控件属性。当 inputType 指定为表单控件名称时，该属性生效。 |
| isDisabled | boolean | false | 是否禁用编辑功能。 |
| isReadOnly | boolean | false | 是否只读模式。 |
| isEditable | boolean | true | 是否启用编辑模式。 |
| editOnClick | boolean | true | 是否单击标签触发编辑模式。 |
| className | string | 'inline-editable' | 自定义样式类名。 |
| style | object | {} | 自定义样式。 |
| textWrapper | function | 自定义文本内容的显示方式。 | |
| input | function | 自定义编辑控件。 | |
| textProps | object | 自定义文本标签的属性。 | |
| inputStyles | object/array | 自定义编辑控件的样式。 | |
| onEditing | function | 正在编辑时的回调函数。 | |
| onEditStart | function | 编辑开始时的回调函数。 | |
| onEditEnd | function | 编辑结束时的回调函数。 |
事件
| 事件 | 描述 |
|---|---|
| onEdit | 编辑完成时触发 |
| onEditing | 正在编辑时触发 |
| onEditStart | 编辑开始时触发 |
| onEditEnd | 编辑结束时触发 |
示例代码
下面是一个使用 react-inline-editable-field 的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- ------------------------------
------ ------- -------- --------- -
----- ------- --------- - ------------------
----- ---------- - ---------- -- -
-------------------
--
------ -
--------------------
-------------
-------------------
----------------
------------- ---------- -- --
------------------
------------------
-----------------
------------------
--------------------
-------- --------- -- --
-------------------- -- ----- -------- -------------- ----------- ------------------
-------------- -- ------ ----------- -------------- --------------------- ---
------------ ------ - ----------- ------ - --
-------------- ------ ------- ----------- ------ --
------------- -- --------------------------
--------------- -- ----------------- -----------
------------- -- ----------------- ---------
--
--
-结语
react-inline-editable-field 提供了一种非常方便的方式来实现行内编辑功能，而且其 API 可以根据个人需求自定义。希望本文对广大前端爱好者有所帮助，同时也欢迎大家多多交流、提出宝贵意见。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552e281e8991b448d04ab