react edit text
这是一个易于使用的可编辑文本组件。只需单击文本框即可编辑!
由Brian Min制成的❤️
演示
请访问https://bria**nmi*n.com/reaeact-edit-text/进行实时演示和各种示例。
安装
npm install react-edit-text --save
类型定义
npm install @types/react-edit-text --save-dev
用法
在使用组件之前,请确保导入CSS样式表。
import React from \'react\' ; import { EditText , EditTextarea } from \'react-edit-text\' ; import \'react-edit-text/dist/index.css\' ; export default function Example ( ) { return ( < div > < EditText showEditButton /> < EditTextarea /> </ div > ) ; }
道具
共享道具
| 支柱 | 类型 | 必需的 | 默认 | 描述 |
|---|---|---|---|---|
| ID | 细绳 | 不 | HTML DOM ID属性 | |
| 姓名 | 细绳 | 不 | HTML输入名称属性 | |
| className | 细绳 | 不 | 显示组件的HTML类属性 | |
| InputClassName | 细绳 | 不 | 输入组件的HTML类属性 | |
| 价值 | 细绳 | 不 | 组件的值 | |
| 默认值 | 细绳 | 不 | 组件的默认值 | |
| 占位符 | 细绳 | 不 | \’\’ | 占位符价值 |
| formatDisplayText | 功能 | 不 | (x)=> x | 在值上应用回调函数以显示格式的值 |
| onsave | 功能 | 不 | 保存输入时触发回调函数 | |
| Onchange | 功能 | 不 | 更改输入时触发回调函数 | |
| OnEditMode | 功能 | 不 | 单击组件时触发回调函数 | |
| Onblur | 功能 | 不 | 输入模糊时触发回调函数 | |
| 风格 | 目的 | 不 | 设置CSS输入样式和查看组件 | |
| 可读 | 布尔 | 不 | 错误的 | 禁用输入,仅显示视图组件 |
EditText Props
| 支柱 | 类型 | 必需的 | 默认 | 描述 |
|---|---|---|---|---|
| 类型 | 细绳 | 不 | \’文本\’ | HTML DOM输入文本类型 |
| 排队 | 布尔 | 不 | 错误的 | 设置内联显示 |
| 展示 | 布尔 | 不 | 错误的 | 显示一个可以按下可以启用编辑模式的编辑按钮 |
| edituttoncontent | 节点 | 不 | 设置编辑按钮的内容。这可以是任何有效元素 | |
| EdituttonProps | 目的 | 不 | {} | 将传递给编辑按钮的道具设置。这可以是任何有效的DOM属性 |
Edittextarea道具
| 支柱 | 类型 | 必需的 | 默认 | 描述 |
|---|---|---|---|---|
| 行 | 数字| \’汽车\’ | 不 | 3 | 可见行数 |
贡献
非常感谢和欢迎捐款。有关更多详细信息,请参考贡献指南。
执照
麻省理工学院©Brian Min
