技術(shù)背景： react-hook顶燕、antd
優(yōu)勢(shì)方案：方案一
一儡循。方案一（可多個(gè)單元格一起）
官方有例子
思想： 利用form表單
二公黑。方案二（僅限單個(gè)單元格 ）
思想： 有點(diǎn)vue的處理方式，利用數(shù)據(jù)標(biāo)志處理顯隱性怜浅，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="請(qǐng)輸入需要修改的備注"
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.各函數(shù)處理
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)
}
- 聚焦事件實(shí)現(xiàn)
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])
