ReactJS - Handsontable - 确定更改答案

【问题标题】：ReactJS - Handsontable - determine changesReactJS - Handsontable - 确定更改
【发布时间】：2018-03-03 12:31:18
【问题描述】：

我正在尝试获取我正在使用的react-handsontable 组件中更改的值：

<HotTable root="hot"
                data={this.state.handsontableData}
                colHeaders={this.handsontableColumns}
                rowHeaders={true}
                width="1200"
                height="300"
                stretchH="all"
                colWidths={this.handsontableColWidths}
                onAfterChange={this.handleHOTChange(changes, source)} />

但是，onAfterChange={this.handleHOTChange(changes, source)} 抛出错误：

./src/MyComponent.jsx
  Line 73:  'changes' is not defined  no-undef
  Line 73:  'source' is not defined   no-undef

谁能告诉我如何从事件中获得“更改”？

如果我只使用不带参数的onAfterChange={this.handleHOTChange}，那么handleHOTchanges 函数会在更改时被调用。但是，我如何确定发生了什么变化？

【问题讨论】：

标签： javascript reactjs handsontable

【解决方案1】：

啊，解决了这个问题：

解决方法如下：

<HotTable root="hot"
                data={this.state.handsontableData}
                colHeaders={this.handsontableColumns}
                rowHeaders={true}
                width="1200"
                height="300"
                stretchH="all"
                colWidths={this.handsontableColWidths}
                onAfterChange={(changes, source) => this.handleHOTChange(changes, source)} />

关键是使用箭头函数语法：(changes, source) => this.handleHOTChange(changes, source)

以下是打印控制台中收到的参数的示例处理函数：

handleHOTChange(changes, source) {
     alert('changed!');
     console.log(changes);
   }

【讨论】：

【解决方案2】：

原因是你应该传入一个函数，不调用一个函数。上面的答案有效，但我认为不正确和多余。它正在创建一个只调用另一个函数 this.handleHOTChange 的函数，但解释也不是这样，因为您需要使用箭头函数语法。您实际上可以使用其他语法，例如

```

<HotTable root="hot"
                data={this.state.handsontableData}
                colHeaders={this.handsontableColumns}
                rowHeaders={true}
                width="1200"
                height="300"
                stretchH="all"
                colWidths={this.handsontableColWidths}
                onAfterChange={function(changes, source){
                   // do something....}

``` 第二。简化这一点。你可以这样做。

<HotTable root="hot"
            data={this.state.handsontableData}
            colHeaders={this.handsontableColumns}
            rowHeaders={true}
            width="1200"
            height="300"
            stretchH="all"
            colWidths={this.handsontableColWidths}
            onAfterChange={this.handleHOTChange} />

期望 handleHotChange 是一个函数

【讨论】：