根据React表中主要组件的过滤器值更新子组件数据表

我是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

chenruibo 回答:根据React表中主要组件的过滤器值更新子组件数据表

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3065774.html

大家都在问