[英]How to navigate between Components in react from button under react-bootstrap-table 2 column
I am using React Bootstrap table 2 for displaying data from external API.我正在使用 React Bootstrap 表 2 来显示来自外部 API 的数据。 As part of my table i have included a dummy column which stores a button for every row when clicked should navigate to a different component with some row information.作为我表的一部分,我包含了一个虚拟列,它为每一行存储一个按钮,单击时应该导航到带有一些行信息的不同组件。
The column definition in my code:我的代码中的列定义:
{
dataField: 'expand',
text: 'EXPAND',
isDummyField:true,
editable: false,
formatter: (cell, row, rowIndex, formatExtraData) =>
{
return (
<button
type="button"
onClick = {() => <ExtendedView data={row} /> }
>
<img src = {expand} alt="expand"></img>
</button>
);
},
headerStyle: () =>
{
return { width: '50px', textAlign: 'center' };
}
}
The Component to which button click should redirect:按钮单击应重定向到的组件:
import React from 'react';
class ExtendedView extends React.Component
{
constructor(props)
{
super(props)
this.state =
{
Id:0
}
}
render()
{
console.log(this.props.data)
console.log(this.state.Id)
return(
<div>
<h1>{this.props.data}</h1>
</div>
);
}
}
export default ExtendedView;
I am not getting any error neither am able to navigate to child component.我没有收到任何错误,也无法导航到子组件。 Also nothing is getting printed as part of two console.log() command I am not sure what's actually going on with react or i have missed something.作为两个 console.log() 命令的一部分,也没有打印任何内容我不确定反应实际发生了什么,或者我错过了一些东西。
This maybe a very simple catch but being a newbie in react i am not able to debug.这可能是一个非常简单的问题,但作为一个新手,我无法调试。
Please help.请帮忙。
Thanks...谢谢...
The issue is in the code onClick = {() => <ExtendedView data={row} /> }
问题在于代码onClick = {() => <ExtendedView data={row} /> }
If what you want is to change the view to the ExtendedView then you must use a library to control different views, becouse React is designed to create SPA.如果您想要将视图更改为 ExtendedView,那么您必须使用库来控制不同的视图,因为 React 旨在创建 SPA。 In this cases I use the library react-router ( https://reacttraining.com/react-router/web/example/basic ).在这种情况下,我使用库 react-router ( https://reacttraining.com/react-router/web/example/basic )。 Is easy to use and can help you with this problem易于使用,可以帮助您解决这个问题
I solved it using the concept of pop up.我使用弹出的概念解决了它。 Make a component and toggle it's display on basis of event trigger制作一个组件并根据事件触发器切换它的显示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.