EditableProTable的自定义表格（renderFormItem参数）

官方文档：https://procomponents.ant.design/components/editable-table

项目的需求是点击操作栏的编辑按钮，有一个可编辑的表格，下面是官方的例子，表格实现功能是既可以通过表单中的某一个值来计算表单输入框中的项，又能通过用户自定义来输入

(比如 状态根据活动名称来决定 ，同时支持用户自定义输入 )

问题是，我初步尝试了以后，发现通过renderFormItem 只可同时实现一种功能  

我最开始是这样写的在 columns的对应项中添加下列属性

 {

title:"xxx"，

dataIndex:"xxx"

editable：true

 renderFormItem: (record) => <RenderNum record={record}></RenderNum>,

}  

RenderNum为手写组件 ，如果你在RenderNum组件上传值 会被RendeNum组件的props参数获取为一个属性 通过props.属性名来读取

const RenderNum=(props:any)=>{

     const v=props.record.要展示的属性名

      return <Input  value={v}/>   //这样当你点编辑按钮的时候 就会出现一个值带有你需要的属性值的输入框 ，正常默认是dataIndex的值 

}  

但是这种值只能根据v的值来确定 不能手动编辑  ，如果你想使用default 或者initValue 你就会发现这个值并没有被传出去，

如果你不给<Input>加value标签 效果和不写renderFormItem效果是一样的 默认是他自己dataIndex的值

解决方法：

那如果能又支持自定义编辑 又可以通过某一个值来控制呢 

我这里的想法是RenderNum组件内外同时可以维护这个状态，虽然可能有问题，但需求可以解决

我这里使用的是函数式组件 传递一个外部的useState参数  到columns列表对象的内部 ，在传递给RenderNum组件  

前面useState声明一个状态我就不写了 

renderFormItem: (record) => <RenderNum record={record} setNumData={setNumData}></RenderNum>,

}  //传递useState的方法 

RenderNum 组件的写法  注意 要写在columns对象的上面 避免无法调用 

const RenderNum =(props:any)=>{

  const {setNumData}=props

  const [num,setNum]=useState()//用于维护内部的value,展示用

  const [isChange,setIschange]=useState(false)// 用来确定用户是否输入了值

  const change=(e)=>{

    setIschange(true)

    setNum(e.target.value)//j将input变为受控组件 

    setNumData(e.target.value)//将值暴露给外部

  }

  !isChange ? setNumData():"" //这里可以不加 如果你的num 默认是有值的 你需要加上这里 ，然后将值传给setNumData 这样是为了避免用户没有输入，外部就拿不到你的初始值 ，

   <Input value={num} onChange={(e)=>{change(e)}}></Input>

}

这样就可以了

antd-pro有很多的问题，不得不用，但是出现问题文档又不全，不过还好react很灵活，闭包虽然可能会出现问题，但是测试全就可以了 放心大胆的使用吧