[英]How can I access props from inside a component
I'm trying to access "props" from a component for which I'm passing an object.我正在尝试从要为其传递 object 的组件访问“道具”。 I'm a bit lost with JS here;
我对这里的 JS 有点迷茫; basically what I'm trying to do is to build a Master/Detail view (so show/hide 2 different components based on user clicks on a table).
基本上我要做的是构建一个主/详细视图(因此根据用户对表格的点击显示/隐藏 2 个不同的组件)。
How can I access "props" from the object rowEvent once a user clicks on a table row?用户单击表格行后,如何从 object rowEvent 访问“道具”?
const rowEvents = {
onClick: (e, row, rowIndex) => {
console.log(row.itemId);
//this.currentItemId= row.itemId; //////////// THIS DOESNT WORK...
}
};
const TableWithSearch = (props) => {
const { SearchBar } = Search;
const { ExportCSVButton } = CSVExport;
return (
<Card>
<CardBody>
<h4 className="header-title">Search and Export</h4>
<p className="text-muted font-14 mb-4">A Table</p>
<ToolkitProvider
bootstrap4
keyField="itemId"
data={props.data}
columns={columns}
search
exportCSV={{ onlyExportFiltered: true, exportAll: false }}>
{props => (
<React.Fragment>
<Row>
<Col>
<SearchBar {...props.searchProps} />
</Col>
<Col className="text-right">
<ExportCSVButton {...props.csvProps} className="btn btn-primary">
Export CSV
</ExportCSVButton>
</Col>
</Row>
<BootstrapTable
{...props.baseProps}
bordered={false}
rowEvents={ rowEvents }
defaultSorted={defaultSorted}
pagination={paginationFactory({ sizePerPage: 5 })}
wrapperClasses="table-responsive"
/>
</React.Fragment>
)}
</ToolkitProvider>
</CardBody>
</Card>
);
};
And the component looks like this:该组件如下所示:
render() {
let show;
if (this.props.currentItemId === null){
show = (<TableWithSearch data={this.props.data} />)
}
else {
show = (<DisplayItem />)
}
return (
<React.Fragment>
<Row>
<Col>
{ show }
</Col>
</Row>
</React.Fragment>
)
}
}
this.props
should give you access for class components this.props
应该让您访问 class 组件
In addition you should create a bind to the click function so it can correctly resolve this
, in the constuctor of the rowEvent此外,您应该在 rowEvent 的构造函数中创建与单击 function 的绑定,以便它可以正确解决
this
问题
Your issue is a bit complex because you seem to be needing to update the prop currentItemId
from parent's parent.您的问题有点复杂,因为您似乎需要从父母的父母更新道具
currentItemId
。
You can solve your issue by doing the following:您可以通过执行以下操作来解决您的问题:
rowEvents
objects in side TableWithSearch
functional component.TableWithSearch
功能组件中的rowEvents
对象的声明。TableWithSearch
component, receive a callback say updateCurrentItemId
from parent which updates the currentItemId in the parentTableWithSearch
组件中,从父级接收回调说updateCurrentItemId
更新父级中的 currentItemIdcurrentItemId
is being passed from parent(again).currentItemId
是从父组件(再次)传递的。 So maintain a state for it. TableWithSearch Component TableWithSearch 组件
const TableWithSearch = (props) => {
const { SearchBar } = Search;
const { ExportCSVButton } = CSVExport;
const {updateCurrentItemId} = props; //<--------- receive the prop callback from parent
const rowEvents = {
onClick: (e, row, rowIndex) => {
console.log(row.itemId);
updateCurrentItemId(row.itemId) // <--------- use a callback which updates the currentItemId in the parent
//this.currentItemId= row.itemId; //////////// THIS DOESNT WORK...
},
};
return (
<Card>
<CardBody>
<h4 className="header-title">Search and Export</h4>
<p className="text-muted font-14 mb-4">A Table</p>
<ToolkitProvider
bootstrap4
keyField="itemId"
data={props.data}
columns={columns}
search
exportCSV={{ onlyExportFiltered: true, exportAll: false }}
>
{(props) => (
<React.Fragment>
<Row>
<Col>
<SearchBar {...props.searchProps} />
</Col>
<Col className="text-right">
<ExportCSVButton
{...props.csvProps}
className="btn btn-primary"
>
Export CSV
</ExportCSVButton>
</Col>
</Row>
<BootstrapTable
{...props.baseProps}
bordered={false}
rowEvents={rowEvents}
defaultSorted={defaultSorted}
pagination={paginationFactory({ sizePerPage: 5 })}
wrapperClasses="table-responsive"
/>
</React.Fragment>
)}
</ToolkitProvider>
</CardBody>
</Card>
);
};
Parent Component父组件
class ParentComp extends React.Component {
state = {
curItemId: this.props.currentItemId
}
updateCurrentItemId = (udpatedCurId) => {
this.setState({
curItemId: udpatedCurId
})
}
render() {
let show;
// if (this.props.currentItemId === null){
if (this.state.curItemId === null){
show = (<TableWithSearch data={this.props.data} updateCurrentItemId={this.updateCurrentItemId}/>)
}
else {
show = (<DisplayItem />)
}
return (
<React.Fragment>
<Row>
<Col>
{ show }
</Col>
</Row>
</React.Fragment>
)
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.