react-inline-edit

Inline edit component for React（基于 React 的内联编辑组件）

安装

npm install @twp0217/react-inline-edit --save

使用

import React from 'react';
import InlineEdit from '@twp0217/react-inline-edit';

export default () => {
  const [editValue, setEditValue] = React.useState<string>('');

  return (
    <InlineEdit
      defaultValue={editValue}
      readView={editValue || '请点击输入值'}
      editView={<input placeholder="请输入值" />}
      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，欢迎讨论。