【问题标题】:I want to Redirect a page with get api id onclick button in bootstrap react table2我想在引导反应表2中使用get api id onclick按钮重定向页面
【发布时间】:2020-09-03 22:02:49
【问题描述】:

我想在 bootstrap react table2 中使用 get api id onclick 按钮重定向页面

【问题讨论】:

  • 我在这里试图理解您的问题,如果我错了,请纠正我。您在带有编辑按钮的表中有一组记录,当您单击编辑按钮时,它必须传递 id 以便您可以编辑属于该特定 ID 的记录,对吗?
  • 我可以看到您的 editRow 函数接受 2 个参数,并且您正在使用 onClick 侦听器调用该函数。问题是您没有将 id 作为参数传递给该函数,例如:onClick={() => this.editRow(id goes here)}。请让我知道它是否有效。请将您的 editRow 函数更改为此 editRow(Nomovi_LocationId)。
  • 能否分享一下你的输出表截图?
  • 到目前为止我还没有使用过Bootstrap表格组件。但是,一般来说,当我们映射来自服务器的响应时,id 会作为参数传递给 onClick 事件处理函数,这有助于我们识别它属于哪个记录。请查看 Bootstrap 表的官方文档。我希望这对您有所帮助。 allenfang.github.io/react-bootstrap-table/example.html#celledit

标签: reactjs redirect datatable get react-bootstrap-table


【解决方案1】:

请检查此https://material-ui.com/components/tables/。只需按照上面链接中的说明映射来自服务器的响应即可。并将这一行添加到您的 TableCell

<TableCell align="right"> <button onClick={() => this.editRow(this.state.location.Nomovi_LocationId)}>Edit</button> </TableCell>

并且请将您的 editRow 函数更改为 editRow(Nomovi_LocationId)。现在您将每行的 ID 传递给 editRow 函数,该函数将与 ID 一起重定向到编辑页面。我希望这应该有效。

此外,您也可以在不使用任何组件的情况下执行此操作。请看下面的示例代码。

var userid = "8f0d0f73-8d52-468b-9844-16d30d303f57";
var sessionid = "5d90bc03-d7b3-4bbb-974e-e379c52b147a";

class LocationInventory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location: [],
        };
    }

render(){
return(
<table className='table'>
   <thead>
      <tr>
          <th>
              //Your table Heading goes here
          </th>
      </tr>
      <tbody>
          { this.state.location.map((data, index) => {
              <tr> 
                    <td><button onClick={() => this.editRow(this.state.location.Nomovi_LocationId)}>Edit</button></td>
             
                    <td>data.LocationName</td>
                    <td>rest of your table data goes here .....</td>
               </tr>
           })}
       </tbody>
   </thead>
</table>
)
}
}

试试这个看看...如果它有效,请告诉我。

【讨论】:

  • 你能帮我把这个代码添加到我的代码中我不明白我可以在哪里添加这个代码
猜你喜欢
  • 2018-11-11
  • 2015-12-02
  • 1970-01-01
  • 2014-05-21
  • 1970-01-01
  • 1970-01-01
  • 2021-10-03
  • 2022-12-03
  • 2013-05-16
相关资源
最近更新 更多