React antd 表已扩展行渲染

Question

I'm in need of some help.

I have a datasource on my antd table in my React.Component. On that table i've set the attribute expandedRowRender:

  <Table
    bordered
    size="small"
    columns={columns}
    rowKey={record => record.id}
    expandedRowRender={record => (
      <ProductDetailView
        record={record}
        onChange={this.OnCoverageProductNumberChanged()}
      />
    )}
    dataSource={products}
    pagination={this.state.pagination}
    loading={this.props.isProductsLoading}
    onChange={this.handleChange}
  />

which is currently sending a record to ProductDetailView which is a react.component. I would like to know how I can send the row index to the onChange event as well, so I can track on which row I am looking at.

I hope this is enough information, basically I just need to know how to send the row index to my onChange event.

Thank you in advance.

Answer 1

The second variable of

expandedRowRender={(record, i) => <p>{i}</p>}

is the row index

you can pass it like this

expandedRowRender={(record, i) => 
    <ProductDetailView 
        record={record} 
        onChange={() => this.OnCoverageProductNumberChanged(i)}
    />
}