技术背景： react-hook、antd
优势方案：方案一
一。方案一（可多个单元格一起）
官方有例子
思想： 利用form表单
二。方案二（仅限单个单元格 ）
思想： 有点vue的处理方式，利用数据标志处理显隐性，input自己拿值，再foucs事件利用绑定的唯一id
- 变量定义
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)
- 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)
}
- 聚焦事件实现
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])
