如何解决带有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>;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。