antd table 编辑单元格

技术背景： react-hook、antd
优势方案：方案一

一。方案一（可多个单元格一起）

官方有例子
思想： 利用form表单

二。方案二（仅限单个单元格 ）

思想： 有点vue的处理方式，利用数据标志处理显隐性，input自己拿值，再foucs事件利用绑定的唯一id

1. 变量定义

    const [inputVal, setInputVal] = useState('')
    const [source, setSource] = useState([])
    const [tableData, setTableData] = useState([])    
    const [isEdit, setIsEdit] = useState(false) 
    const [eidtRow, setEidtRow] = useState({})
    const [editInputVal, setEditInputVal] = useState('')  
    const editInputRef = useRef(null)

2. colums渲染

        {
            title: '备注',
            dataIndex: 'remarkName',
            key: 'remarkName',
            align: 'center',
            editable: true,            
            width: 90,
            render: (text, record)=>{

                if(record.isEdit){
                    console.log('id', record)                    
                    return (
                        <Input
                        id= {`input-${record.id}`}
                        value={ editInputVal }
                        style={{ width: 310 }}
                        placeholder="请输入需要修改的备注"
                        onPressEnter={(e) => handleSubmitRemarkName(e, record)}
                        onBlur={(e) => handleSubmitRemarkName(e, record)}
                        onChange={(e) => handleChangeInputVal(e)}
                        allowClear
                      />
                    )
                }else {
                    return (
                        <div>
                            <span style={{marginRight: 10}}>{ text }</span>
                            <FormOutlined onClick={() => handleEditRemarkName(record)}/>
                        </div>
                    )                    
                }

            }                
        },

3.各函数处理

    const handleEditRemarkName = (row) =>{     
        console.log('1', 1234668)        
           setEditInputVal(row.remarkName)
           const table = tableData.map(item => {
               if(item.id === row.id){
                   return {
                       ...item,
                       isEdit: true,
                       inputRef: editInputRef
                   }
               }else {
                   return item
               }
           })
           setTableData(table) 
           setEidtRow(row)  
           setIsEdit(true)                           
    }

    const handleSubmitRemarkName = (e, row) =>{
        const table = tableData.map(item => {
            if(item.id === row.id){
                return {
                    ...item,
                    isEdit: false
                }
            }else {
                return item
            }
        })  
        setTableData(table)         
        setIsEdit(false)    

        const inputVal = e.target.value
        const query = {
            phoneNo: row.phoneNo,
            remarkName: inputVal
        }            
        props.addCommonPhone(query)


    }

    const handleChangeInputVal = (e) => {
      console.log('e',e.target.value)
      setEditInputVal(e.target.value)
      
    }

4. 聚焦事件实现

    useEffect(() => {
        console.log('props.commonSource', props.commonSource)
        setSource(props.commonSource)
        setTableData(filterData(props.commonSource, inputVal))
    }, [props.commonSource])

    useEffect(() =>{

    const inputDom = document.querySelector(`#input-${eidtRow.id}`)      
    if(inputDom){
        inputDom.focus({
            cursor: 'start',
          });
    }

    },[isEdit])