Question

我试图通过比较row.id和我的数据库中的item.id来有条件地呈现react-bootstrap-table中的按钮。

我设法使用dataFormat道具添加了一个按钮，但是我无法有条件地显示按钮

我正在使用该表来显示从数据库中获取的组。
一旦我获取了所有组，我将它们的ID（row.id）与我在数据库中的组进行比较。
如果匹配，我会显示Button1
如果不匹配，我会显示Button2

我尝试了很多尝试，但我的解决方案并没有给我预期的结果

这是我的代码：

如果我在数据库中已有8个组，则8个组的按钮应为red，文本与其他按钮不同。

如果该组不在数据库中，则其按钮应为blue

class App extends Component {

constructor() {
  super()
  this.state = {
     json: [], // json(coming from the Meetup-api)
     jsonFromDatabase: [],
  }
  this.cellButton = this.cellButton.bind(this);
 }

cellButton(cell, row, enumObject, rowIndex) {
  let theButton
  for(var group in this.state.jsonFromDatabase){
  if (this.state.jsonFromDatabase[group].id !== row.id){
     // Display this button if the group is not in the database
     theButton = <button style={{ backgroundColor: "blue"}}
                     type="button"
                     onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
                   Process the group
                 </button>
   } else {
     // Display this button if the group is already in the database
     theButton = <button style={{ backgroundColor: "red" }}
                     type="button"
                     onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}>
                   Update the group
                 </button>
     }
   }
  return theButton
}

render() {
    return (
      <BootstrapTable data={this.state.json} options={ this.options } >
           <TableHeaderColumn isKey dataField='id' width='100'>ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' width='300'>Group Name</TableHeaderColumn>
          <TableHeaderColumn dataField='button' width='100' dataFormat={this.cellButton}>Generate Group Page</TableHeaderColumn>
        </BootstrapTable>
    )
  }
}

我尝试过的另一个不成功的变体：

  cellButton(cell, row, enumObject, rowIndex) {
  let theButton

  Object.keys(this.state.jsonFromDatabase).map((key) => {
  if (this.state.jsonFromDatabase[key].id  !== row.id){
    return (
      <button style={{ backgroundColor: "blue"}}
          type="button"
          onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
         Process the group
      </button>
    )
   } else {
       ....
       ....
   }
  })
 }

Answer 1

你的逻辑似乎是正确的，但实现有点不对。

cellButton(cell, row, enumObject, rowIndex) {
  let theButton;
  let groupExistsInDatabase = false;
  for(var group in this.state.jsonFromDatabase){
    if (this.state.jsonFromDatabase[group].id === row.id){
      // make groupExistsInDatabase true if the group is found in the database
      groupExistsInDatabase = true;
      break;
    }
  }

  if(groupExistsInDatabase === true) {
    theButton = <button style={{ backgroundColor: "red" }} type="button" onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}>
                  Update the group
                </button>
  } else {
    theButton = <button style={{ backgroundColor: "blue" }} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
                  Process the group
                </button>
  }
  return theButton;
}

此解决方案应该有效。如果有一些修改，请告诉我。

Answer 2

问题是，您是returning来自单元格格式器function的一个按钮。

使用此：

cellButton(cell, row, enumObject, rowIndex) {
    let uiItems = [];
    for(var group in this.state.jsonFromDatabase){
        if (this.state.jsonFromDatabase[group].id !== row.id){
            uiItems.push(<button style={{ backgroundColor: "blue"}}
                            type="button"
                            onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
                                Process the group
                        </button>)
        }else{
                uiItems.push(<button style={{ backgroundColor: "red" }}
                                type="button"
                                onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}>
                                   Update the group
                            </button>)
        }
    }
    return uiItems;
}

或使用map，如下所示：

cellButton(cell, row, enumObject, rowIndex) {
    return this.state.jsonFromDatabase.map((group, i) => {
        if (group.id !== row.id){
            return  <button style={{ backgroundColor: "blue"}}
                        type="button"
                        onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}>
                            Process the group
                    </button>
        }else{
            return  <button style={{ backgroundColor: "red" }}
                        type="button"
                         onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}>
                            Update the group
                    </button>
        }
    })
}

如何在react-bootstrap-table中有条件地呈现按钮？（每行按钮）

2 个答案:

如何在react-bootstrap-table中有条件地呈现按钮？ （每行按钮）

2 个答案:

如何在react-bootstrap-table中有条件地呈现按钮？（每行按钮）