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
下载源码
通过命令行克隆项目:
git clone https://github.com/bymi15/react-edit-text.git