我是React的新手。我有一个带有子组件的反应表。我想根据主组件的过滤值在子组件中显示更新的数据。也就是说,可以将用于过滤主组件的值传递给子组件,并进一步默认过滤子组件数据并显示该数据。下面是我的Reacttable代码片段和当前表格的屏幕截图。
<div>
<ReactTable
data={cloudBilling["detailedCost"]}
filterable
defaultFilterMethod={(filter,row) =>
String(row[filter.id]) === filter.value}
columns={[
{
columns: [
{
Header: "username",id: "tagValue",accessor: d => d.tagValue,filterMethod: (filter,rows) =>
matchSorter(rows,filter.value,{ keys: ["tagValue"] }),filterAll: true
}
]
}
]}
defaultPageSize={10}
classname="-striped -highlight"
SubComponent={row => {
return (
<div>
<ReactTable
data={cloudBilling["detailedCost"]}
filterable
defaultFilterMethod={(filter,row) =>
String(row[filter.id]) === filter.value}
columns={[
{
Header: "cost",columns: [
{
Header: "cost",id: "cost",accessor: d => d.cost,rows) =>
matchSorter(rows,{ keys: ["cost"] }),filterAll: true
},{
Header: "costType",id: "costType",accessor: d => d.costType,{ keys: ["costType"] }),filterAll: true
}
]
},{
Header: "Tag",columns: [
{
Header: "tagKey",id: "tagKey",accessor: d => d.tagKey,{ keys: ["tagKey"] }),{
Header: "tagValue",{
Header: "Date",columns: [
{
Header: "startDate",id: "startDate",accessor: d => d.startDate,{ keys: ["startDate"] }),{
Header: "endDate",id: "endDate",accessor: d => d.endDate,{ keys: ["endDate"] }),filterAll: true
}
]
}
]}
defaultPageSize={10}
classname="-striped -highlight"
/>
<br />
</div>
);
}}
/>
<br />
</div>
截屏: Main table before filtering
Main table after searching for a particular user Currently the subcomponent or sub table shows all the data but I want it to display only user anharder's rows