ReactJS：重新渲染后 Handsontable 单元格数据清除

Question

我将 Handsontable (https://handsontable.com/docs/) 实现到我的一个项目中，但是我遇到了一个问题，当我的按钮 onClick 函数触发时，它会导致重新渲染和所有单元格插入 Handson 的数据table 被删除。

<HotTable
  ref={hotTableComponent2}
  data={[]}
  colHeaders={['Case ID', 'Name']}
  rowHeaders={true}
  width="100%"
  columnHeaderHeight={35}
  rowHeights={30}
  manualColumnResize={true}
  persistentState={true}
  stretchH="all"
  minSpareRows={1}
  licenseKey="non-commercial-and-evaluation"
/>

<Button onClick={() => SubmitFunction()}>Submit</Button>

关于如何防止 table 在重新渲染时删除单元格数据有什么想法吗？

TIA

编辑

进一步调查后，似乎 SubmitFunction() 中触发的按钮状态 (setButtonLoading(true)) 负责删除 HandsonTable 中捕获的数据。

https://codesandbox.io/s/relaxed-neumann-08euk?file=/src/App.js

Answer 1

问题是，当您编辑单元格时，您没有将它们保存在状态中，也没有在 table 道具的数据对象中传递空白数组。当它重新呈现时它只有空白数组。

怎么办？您需要创建一个状态并保存您在该状态的列中输入的数据。因此它将被保存并在您的数据道具中传递。现在，如果它将重新呈现，将从状态变量中获取数据。

而不是 data={[]} 你应该传递 data={stateVariable}

ReactJS：重新渲染后 Handsontable 单元格数据清除

ReactJS: Handsontable Cell Data Clearing after Rerender

reactjs

handsontable