aximario / react-editable

可编辑组件

react-editable

Editable 组件只接受两个 child，并根据配置展示其中的一个，点击编辑展示第二个孩子，点击确定和取消返回显示第一个孩子，编辑，确定和取消操作提供有相应的监听事件

安装

npm i @aximario/react-editable -S

API

属性	描述	是否必填	类型	默认值
mode	展示方式，'exist','display' exist 通过切换dom控制，display 通过样式控制，使用 display 时会在传入的孩子外面包一层 div	否	string	exist
onEdit	点击编辑触发，如果返回一个 promise 或者监听函数中有 await，则会等待函数执行完成后才显示第二个孩子	否	function	-
onConfirm	点击确定触发，如果返回一个 promise 或者监听函数中有 await，则会等待函数执行完成后才显示第二个孩子，过程中确定会变成 loading	否	function	-
onCancel	点击取消触发，如果返回一个 promise 或者监听函数中有 await，则会等待函数执行完成后才显示第二个孩子	否	function	-

使用

<Editable>
  <p>200</p>
  <input />
</Editable>

// 监听函数不返回，默认执行完成后显示第一个孩子
<Editable
  mode="display"
  onEdit={() => { console.log('edit') }}
>
  <p>200</p>
  <input />
</Editable>

// 监听函数返回 promise，等待执行完成后显示第一个孩子
<Editable
  mode="display"
  onEdit={() => Promise.resolve()}
>
  <p>200</p>
  <input />
</Editable>

// 监听函数有异步操作，等待执行完成后显示第一个孩子
<Editable
  mode="display"
  onEdit={async () => { await request() }}
>
  <p>200</p>
  <input />
</Editable>