https://github.com/twp0217/react-inline-edit
Inline edit component for React（基于 React 的内联编辑组件）
https://github.com/twp0217/react-inline-edit
inline-edit react react-component react-inline-edit
Last synced: 19 days ago
JSON representation
Inline edit component for React（基于 React 的内联编辑组件）
- Host: GitHub
- URL: https://github.com/twp0217/react-inline-edit
- Owner: twp0217
- License: mit
- Created: 2021-12-07T07:37:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-09T03:27:35.000Z (over 4 years ago)
- Last Synced: 2025-10-08T03:32:36.812Z (8 months ago)
- Topics: inline-edit, react, react-component, react-inline-edit
- Language: TypeScript
- Homepage: https://twp0217.github.io/react-inline-edit/
- Size: 512 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-inline-edit
Inline edit component for React（基于 React 的内联编辑组件）
## 安装
```bash
npm install @twp0217/react-inline-edit --save
```
## 使用
```typescript
import React from 'react';
import InlineEdit from '@twp0217/react-inline-edit';
export default () => {
const [editValue, setEditValue] = React.useState('');
return (
}
onConfirm={setEditValue}
/>
);
};
```
## API
### InlineEditProps
| 名称 | 类型 | 默认值 | 说明 |
| -------------- | -------------------- | --------- | ------------------ |
| className | string | - | 类名 |
| style | React.CSSProperties | - | 样式 |
| disabled | `boolean` | `false` | 是否禁用 |
| keepOpenOnBlur | `boolean` | `false` | 失去焦点时保持打开 |
| hideActions | `boolean` | `false` | 是否隐藏操作按钮 |
| confirmText | `string` | `Confirm` | 确认文本 |
| cancelText | `string` | `Cancel` | 取消文本 |
| defaultValue | `string` | - | 默认值 |
| isEditing | `boolean` | - | 是否正在编辑 |
| loading | `boolean` | - | 加载中 |
| placement | `top` \| `bottom` | - | 按钮位置 |
| readView | `React.ReactNode` | - | 查看视图 |
| editView | `React.ReactNode` | - | 编辑视图 |
| onEdit | `() => void` | - | 编辑事件 |
| onBlur | `() => void` | - | 失去焦点事件 |
| onConfirm | `(value: T) => void` | - | 确认事件 |
| onCancel | `() => void` | - | 取消事件 |
## 支持
- 如果项目对你有帮助，请点颗星星:star:，谢谢。
- 如果你对项目有想法、问题、BUG，欢迎讨论。