我正在使用React的函式庫，我有一個標題的清單（陣列），另一邊是一個包含表格資料的陣列。
閱讀文件後，我能夠啟用選單，其中我新增了「在左側新增列」和「在右側新增列」的選項，但這只是在視覺上完成的，並沒有更新React狀態中的標題。
我嘗試了兩種方法。 第二種方法是“自訂下拉式選單配置”，我手動添加了列，並使用handsontable方法“updateSettings”來更新標題，但它仍然不起作用（有時它起作用，有時它在其他地方新增列）。
function addToHeader (array, index, side, valor) {
if (side === "Left") array.splice(index, 0, valor)
else if (side === "Right") array.splice(index + 1, 0, valor)
return array
}
在代码中：
dropdownMenu: {
items: {
col_right: {
name: 'Move column right',
callback: (key: any, selection: any, clickEvent: any) => {
const column = selection[0].end.col
headers = addToHeader(headers, column, "Right", 'New column')
console.log('headers', headers) // 返回正确更改的数组
hot.updateSettings({ colHeaders: headers })
}
},
col_left: {
name: 'Move column left',
callback: (key: any, selection: any, clickEvent: any) => {
const column = selection[0].end.col
headers = addToHeader(headers, column, "Left", 'New column')
console.log('headers', headers) // 返回正确更改的数组
hot.updateSettings({ colHeaders: headers })
}
},
}
我按照以下方式完成了這個任務：
afterColumnMove: ( movedColumns: number[], finalIndex: number, dropIndex: number | undefined, movePossible: boolean, orderChanged: boolean ) => { if (orderChanged) { let ht if (hotRef.current) ht = hotRef.current.hotInstance if (ht) { const headers = ht.getColHeader() const colMoved = movedColumns[0] setHeaders(prevHeaders => headers as string[]) // 这样如果你更新了状态 const newOrderData = moveColumnTable(list, finalIndex, colMoved) setList(prevData => newOrderData) ht.loadData(list) } } }關鍵是，我之前沒有意識到的是，除了表頭的狀態沒有被更新之外，當移動列時，表格資料也必須更新，這就是我實作一個js函數來移動資訊的地方（
moveColumnTable）const moveColumnTable = (tableData: any[], fromIndex: number, toIndex: number) => { if (toIndex === fromIndex || toIndex < 0 || fromIndex < 0) { // 如果起始索引等于结束索引或者它们是无效值，那么就没有变化。 return tableData } const reorderedTableData = tableData.map(row => { const newRow = [...row] const movedItem = newRow.splice(toIndex, 1)[0] newRow.splice(fromIndex, 0, movedItem) return newRow }) return reorderedTableData }重要提示：我實作了這個函數來移動單一列