Question

我是新来的人。对于我的项目，我想通过单击表中的图标来更改我的状态，这将更改我的状态。我正在使用getCellActions（react-data-grid）。如何将自定义函数与列和行对象一起传递。

谢谢。

NT：我没有使用redux

getCellActions(column, row, state) {

        if(column.key === 'modify'){
            return [
                {
                    icon: 'fa fa-edit',
                    callback: () => {
                        console.log(row.id);
                       //this.getRoleData();
                    }
                }
            ];

        }
    }

Answer 1

this.getRoleData()不起作用的原因是，回调中的this不在组件的上下文中。

将您的getCellActions函数更改为arrow function，因此您将组件作为上下文（在箭头函数内部，它保持其原始上下文的含义）：

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedRowId: null
        };
    }

    myCallback = (rowId) => {
        console.log(rowId);
        this.setState({ selectedRowId: rowId });
    };

    getCellActions = (column, row, state) => {

        if(column.key === 'modify'){
            return [
                {
                    icon: 'fa fa-edit',
                    callback: () => {
                        console.log(row.id);
                        this.myCallback(row.id);
                    }
                }
            ];

        }
    }

    render() {
        // your render function...
    }
}

替代：

在构造器中将this绑定到getCellActions，例如：

this.getCellActions = this.getCellActions.bind(this);

Answer 2

您可以简单地使用ES6并传递箭头函数表达式，该表达式仅调用所需的函数并自动将函数与this绑定。.

在react-data-grid中，您将必须执行以下操作：

<ReactDataGrid
    columns={this._columns}
    rowGetter={this.rowGetter}
    rowsCount={this._rows.length}
    minHeight={300}
    getCellActions= {(column, row) => this.getCellActions(column, row)}
    state = {this.state}
/>

您的getCellActions函数可以保持不变：

getCellActions(column, row) {

    if(column.key === 'modify'){
        return [
            {
                icon: 'fa fa-edit',
                callback: () => this.getRoleData(row.id)
            }
        ];

    }
}

问题是，当您写：

getCellActions= {(column,row) => this.getCellActions(column, row)}

您实际上传递了一个匿名函数，该函数仅在触发时才执行。我想补充一点，当您在一行中编写箭头函数时，它会自动返回该语句，除非您用大括号将那行换行并编写一个普通函数。因此，以上行的工作方式为：

getCellActions= {(column,row) => return this.getCellActions(column, row)}

因此，MANTRA是：返回引用，不要在触发器之前执行它。

我如何从getCellActions更改我的状态

2 个答案: