带有JSX的制表符列-执行类函数

问题描述

我正在尝试使用react-tabulator，但在表列内部呈现函数时遇到了麻烦。 该函数正在返回JSX，但它正在使用其他无法执行的类函数。

基本上，“操作”列具有2个图标（可编辑和删除），每个图标都是具有onClick属性的图标组件，该组件在类中调用功能。 功能无法执行，因为“ this”未定义，因此无法找到功能 。

这是我的代码：

import React,{Component} from 'react';
import {reactFormatter,ReactTabulator} from 'react-tabulator'
import IconButton from "@material-ui/core/IconButton";
import {IconsDiv} from "./styles";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPencilAlt,faTrash} from "@fortawesome/free-solid-svg-icons";

class MyTable extends Component {
constructor(props) {
    super(props);
    this.state = {
        teamsTableData: this.createFormattedData([1,2]),rowID: 0,};
    this.options = {
        movableColumns: true,pagination: "local",paginationSize: 15,};

    this.ref = null;
    this.handleEdit = this.handleEdit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
}
 createFormattedData(data) {
    return {
        rows: data.map(ele => {
                return {
                    id: ele.teamId,name: "test1",count: "test1",};
            }
        ),columns: [
            {
                title: "Name",field: "name",headerFilter: "input",},{
                title: "Count",field: "count",headerFilterFunc: "=",{
                title: "Actions",field: "actions",formatter: reactFormatter(<this.createActions/>),}
        ],}
}
  createActions(table) {
    const rowData = table.cell._cell.row.data;
    return <IconsDiv>
        <IconButton onClick={() => this.handleEdit(rowData)}>
            <FontAwesomeIcon icon={faPencilAlt} className={'Icon'}/>
        </IconButton>
        {" "}
        <IconButton onClick={() => this.handleDelete(rowData)}>
            <FontAwesomeIcon icon={faTrash} className='Icon'/>
        </IconButton>
    </IconsDiv>;
}
 handleEdit(rowData) {
    this.setState({rowID: rowData.id});
}
handleDelete(rowData) {
        this.setState({deleteRow: rowData.id});
    }

render() {
    return (
        <>
            <ReactTabulator
                ref={ref => (this.ref = ref)}
                data={this.state.teamsTableData.rows}
                columns={this.state.teamsTableData.columns}
                tooltips={true}
                options={this.options}
                layout={"fitColumns"}
            />
        </>
    )
}
}

有人知道出什么问题了吗？为什么列显示正确，但操作失败？为什么找不到“ this.handleEdit”或“ this.handleDelete”？ （我想“ this”是未定义的）

解决方法

您可以将this分配给另一个变量，以便将范围传递给函数：

  createActions(table) {
    var self = this; //assign this to the self variable and pass into the icons

    const rowData = table.cell._cell.row.data;
    return <IconsDiv>
        <IconButton onClick={() => self.handleEdit(rowData)}>
            <FontAwesomeIcon icon={faPencilAlt} className={'Icon'}/>
        </IconButton>
        {" "}
        <IconButton onClick={() => self.handleDelete(rowData)}>
            <FontAwesomeIcon icon={faTrash} className='Icon'/>
        </IconButton>
    </IconsDiv>;
}

,

您是否尝试过使用箭头功能？

createActions = (table) => {

    const rowData = table.cell._cell.row.data;
    return <IconsDiv>
        <IconButton onClick={() => this.handleEdit(rowData)}>
            <FontAwesomeIcon icon={faPencilAlt} className={'Icon'}/>
        </IconButton>
        {" "}
        <IconButton onClick={() => this.handleDelete(rowData)}>
            <FontAwesomeIcon icon={faTrash} className='Icon'/>
        </IconButton>
    </IconsDiv>;
}