ReactJS

Question

我正在尝试获取 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

有人可以告诉我如何从活动中获得 "changes" 吗？

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

Answer 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);
   }

Answer 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 是一个函数

ReactJS - Handsontable - 确定更改

ReactJS - Handsontable - determine changes

javascript

handsontable