固定数据表函数 onRowClick 不返回行数据

Posted 2023-02-21

【中文标题】固定数据表函数 onRowClick 不返回行数据

【英文标题】：Fixed Data Tables function onRowClick not returning row Data

【发布时间】：2017-01-02 05:19:35

【问题描述】：

这是表格类，我试图在表格选项中返回行数据对象 onRowClick。当我记录所有三个参数时，对象返回空。索引并单击事件 console.log 完全可以返回此 here is the event: Proxy dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "click"… the index: 0 the object: Object Anybody 知道为什么或如何获取返回的数据？也许使用不同的功能？

class BPTable extends React.Component 
constructor(props) 
super(props);
    // console.log(props.result);


logArgs(event,index,object)
console.log('here is the event:',event,'the index:',index, 'the object:',object);


render() 
//reset the state of BP Data on search click. 
this.state = 
  bpTableData: [
  ],
;
//creation of each data object to display
for (var i = 0; i < this.props.result.length; i++) 
    this.state.bpTableData.push(
        cc: this.props.result[i]['CardCode'],
        name: this.props.result[i]['BPName'],
        cPerson: this.props.result[i]['ContactPerson'],
        address: this.props.result[i]['Address'],
        email: this.props.result[i]['Email']
    );


return (
    <Table 
        onRowClick=this.logArgs
        rowsCount=this.state.bpTableData.length
        rowHeight=50
        headerHeight=50
        width=1200
        height=1000
        ...this.props>
    <Column 
      header=<Cell>Card Code</Cell>
      cell=props => (
        <Cell ...props
        data=this.state.bpTableData[props.rowIndex].cc>
          this.state.bpTableData[props.rowIndex].cc
        </Cell>

      )
      width=200
    />        
    <Column
      header=<Cell>Buisness Name</Cell>
      cell=props => (
        <Cell ...props
          data = this.state.bpTableData[props.rowIndex].name
        >
          this.state.bpTableData[props.rowIndex].name
        </Cell>

      )
      width=200
    /> 
    <Column
      header=<Cell>Contact Person</Cell>
      cell=props => (
        <Cell ...props>
          this.state.bpTableData[props.rowIndex].cPerson
        </Cell>

      )
      width=200
    />                
    <Column
      header=<Cell>Address</Cell>
      cell=props => (
        <Cell ...props>
          this.state.bpTableData[props.rowIndex].address
        </Cell>

      )
      width=400
    />        
    <Column
      header=<Cell>Email</Cell>
      cell=props => (
        <Cell ...props>
          this.state.bpTableData[props.rowIndex].email
        </Cell>

      )
      width=100
    />
  </Table>
);

【问题讨论】：

似乎你的 logArgs 东西没有绑定到组件的上下文。只需尝试将logArgs(event,index,object) 更改为logArgs = (event, index, object) => 或在constructor 中显式绑定（this.logArgs = this.logArgs.bind(this) 就在您的super 之后）

onRowClick=function(event,index,object) console.log('here is the event:',event,'the index:',index, 'the object:',object); 返回相同的内容。我改变了这样的构造函数constructor(props) super(props); this.logArgs = this.logArgs.bind(this) // console.log(props.result); 它仍然无法正常工作。

您希望从活动中获得什么回报？那个物体里面应该有什么？ （也别在意我的上一条评论，我第一次把你弄错了）

我正在执行数据行信息。我想点击该行。并返回三件事：事件、行索引和行中的数据。唯一缺少的是数据。它返回一个空对象。假设我有一排有名字和姓氏。 onRowClick 应该返回 firstname: Kyas, lastname: Fletcher

【参考方案1】：

看起来 onRowClick 只有 args: event, index。我通过使用索引来访问我作为状态的一部分创建的适当的表数据来解决这个问题。

在你的情况下，它会是：

logArgs(event,index)
  console.log( 'here is the event:',event,
               'the index:',index,
               'the object:',this.state.bpTableData[index]
  );