我正在使用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 }重要提示：我实现了这个函数来移动单个列