根据 react-table 中的条件禁用某些行

Question

我需要根据特定条件禁用某些行。这是我的代码：

<ReactTable    
  data={this.state.categoryTable}
  loading={this.state.loading}
  noDataText="Please select a country template"
  columns={[
    {
      Header: 'Category/Lot',
      accessor: 'category_name'
    }, {
      Header: "Display Name",
      accessor: "display_name",
      Cell: this.renderEditable
    }, {
      Header: 'Price(per month)',
      accessor: 'price',
      Cell: this.renderEditable
    }, {
      Header: 'Spots',
      accessor: 'spots',
      Cell: this.renderEditable
    }>

当 Category/Lot 等于 "South America"

时，我需要禁用价格和点行

Answer 1

我发现要访问当前行中的另一个字段，您应该访问 row.row、

所以，你的代码应该这样写：

<ReactTable    
  data={this.state.categoryTable}
  loading={this.state.loading}
  noDataText="Please select a country template"
  columns={[
    {
      Header: 'Category/Lot',
      accessor: 'category_name'
    }, {
      Header: "Display Name",
      accessor: "display_name"
    }, {
      Header: 'Price(per month)',
      accessor: 'price',
      Cell: row => row.row.category_name=="South America" ? ***disable*** : row.value
    }, {
      Header: 'Spots',
      accessor: 'spots',
      Cell: row => row.row.category_name=="South America" ? ***disable*** : row.value
    }]}
 />

现在，我不确定禁用行是什么意思...但是您可以处理 table 中的 "disabled" 索引集合或类似解决方案的状态。

或者，如果您要在单元格内渲染其他组件，那么您可以将 "disable" 传递给某些属性:

Cell: row => (<SomeSubComponent disable={row.row.category_name=="South America"} value={row.value} />)

希望我有所帮助:)

根据 react-table 中的条件禁用某些行

Disabling certain rows based on condition in react-table

reactjs

react-table