如何有条件地呈现react-bootstrap-table中的按钮？ （每行的按钮） [英] How to conditionally render the button in react-bootstrap-table ? (The button for each row)

问题描述

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

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

• 我使用表来显示从我的数据库中得到的组。获取所有的组，我比较他们的ID（row.id）与我在我的数据库上的组。


• 如果它们匹配，我显示 Button1 Button2

$

我尝试了很多次尝试，但是我的解决方案并没有给我想要的结果

这里是我的代码：

• 如果我已经在数据库中有8个组，那么8个组的按钮应该是 red 文本比其他按钮。



• ，如果该组是不是t在数据库中，它的按钮应该是 blue

    class App extends组件{
   
  构造函数（）{
   super（）
   this.state = {
   json：[]，// json（来自Meetup-api） 
   jsonFromDatabase：[]，
  } 
   this.cellButton = this.cellButton.bind（this）; 
   
   
   cellButton（cell，row，enumObject，rowIndex）{
   let theButton 
  （this.state.jsonFromDatabase中的var组）{
   if（this.state.jsonFromDatabase [group] .id！== row.id）{
   //如果该组不在数据库中，则显示该按钮
   theButton =< button style = {{ backgroundColor：blue}} 
   type =button
   onClick = {（）=> this.onClickGroupSelected（cell，row，rowIndex）}> 
  处理组
  < / button> 
  } else {
   //如果该组已经在数据库中，则显示该按钮
   theButton =< button style = {{backgroundColor：red}} 
   type = button
   onClick = {（）=> this.onClickGroupToUpdate（cell，row，rowIndex）}> 
  更新群组
  < / button> 
   
   $ b return theButton 
   
   $ b render（）{
   return（
  < BootstrapTable data = {this .state.json} options = {this.options}> 
  < TableHeaderColumn isKey dataField ='id'width ='100'> ID< / TableHeaderColumn> 
  < TableHeaderColumn dataField ='name 'width ='300'>组名称< / TableHeaderColumn> 
  < TableHeaderColumn dataField ='button'width ='100'dataFormat = {this.cellButton}>生成组页面< / 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 = {{backgrou ndColor：blue}} 
 type =button
 onClick = {（）=> this.onClickGroupSelected（cell，row，rowIndex）}> 
处理组
< / button> 
）
} else {
 .... 
 .... 
} 
}）
} 
  

  cellButton（cell，row）
你的逻辑看起来是正确的，但实现有点不对。 ，enumObject，rowIndex）{
 let theButton; 
让groupExistsInDatabase = false; 
 for（var this.state.jsonFromDatabase）{
 if（this.state.jsonFromDatabase [group] .id === row.id）{
 // make groupExistsInDatabase true if在数据库中找到该组
 groupExistsInDatabase = true; 
 break; 
 
 
 $ b $ if（groupExistsInDatabase === true）{
 theButton =< button style = {{backgroundColor：red}} type =按钮onClick = {（）=> this.onClickGroupToUpdate（cell，row，rowIndex）}> 
更新群组
< / button> 
} else {
 theButton =< button style = {{backgroundColor：blue}} type =buttononClick = {（）=> this.onClickGroupSelected（cell，row，rowIndex）}> 
处理组
< / button> 
} 
返回theButton; 
 
  

这个解决方案应该可以工作。让我知道是否有一些修改。

I'm trying to conditionally render the button in the react-bootstrap-table by comparing the row.id with the item.id from my database.

I managed to add a button by using a the dataFormat prop, but I'm having trouble to display a button conditionally

• I'm using the table to display groups that I get from my database.
• once I fetch all the groups, I compare their ids (row.id) with the groups that I have on my database.
• If they match I display Button1
• If they don't match I display Button2

I tried many attempts but my solutions are not giving me the desired result

Here's my code :

• If I already have 8 groups in the database, the buttons of the 8 groups should be red with a different text than the other buttons.

• and if the group is not in the database, it's button should be 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>
      )
    }
  }
  

Another unsuccessful variation that I tried:

  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 {
       ....
       ....
   }
  })
 }

解决方案

Your logic seems correct but implementation is a bit wrong.

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;
}

This solution should work. Let me know if there are some modifications.

这篇关于如何有条件地呈现react-bootstrap-table中的按钮？ （每行的按钮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！