reactjs - 渲染react-table中一行的组件oclick(https ://github. com/react-tools/react-table)

Question

我想在 react 表中单击一行时渲染一个组件。我知道我可以使用子组件来实现此目的，但这不允许单击整行。我希望当用户单击该行上的任意位置时呈现子组件。从他们的 github 页面我了解到我想编辑 getTdProps 但我实际上无法实现它。此外，子组件是表单，在保存该表单时，我想更新该行以反射(reflect)用户所做的更改并关闭表单。如有任何帮助，我们将不胜感激。

import React, {Component} from 'react';
import AdomainRow from './AdomainRow'
import ReactTable from "react-table"
import AdomainForm from './AdomainForm'
import 'react-table/react-table.css'

export default class AdomianTable extends Component {

    render() {

            const data = [{
                adomain: "Reebok1.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            },
            {
                adomain: "Reebok2.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            },
            {
                adomain: "Reebok3.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            }];

            //FOR REACT TABLE TO WORK
            const columns = [{
                Header : 'Adomian',
                accessor : 'adomain'
                }, {
                Header : 'Name',
                accessor : 'name'
                }, {
                Header : 'IABCategories',
                accessor : 'iabCategories',
                Cell : row => <div>{row.value.join(", ")}</div>
                }, {
                Header : 'Status',
                accessor : 'status'
            }];

            return (
                <div>
                    <ReactTable

                    getTdProps={(state, rowInfo, column, instance) => {
                        return {
                            onClick: (e, handleOriginal) => {
                                <AdomainForm row={rowInfo} ></AdomainForm>
                                console.log('A Td Element was clicked!')
                                console.log('it produced this event:', e)
                                console.log('It was in this column:', column)
                                console.log('It was in this row:', rowInfo)
                                console.log('It was in this table instance:', instance)

                                // IMPORTANT! React-Table uses onClick internally to trigger
                                // events like expanding SubComponents and pivots.
                                // By default a custom 'onClick' handler will override this functionality.
                                // If you want to fire the original onClick handler, call the
                                // 'handleOriginal' function.
                                if (handleOriginal) {
                                    handleOriginal()
                                }
                            }
                        }
                    }}
                    data={data.adomains}
                    columns={columns}
                    defaultPageSize={10}
                    className="footable table table-stripped toggle-arrow-tiny tablet breakpoint footable-loaded"
                    SubComponent =  { row =>{
                        return (
                            <AdomainForm row={row} ></AdomainForm>
                        );
                    }}
                    />
                </div>
            ); 
        }
    }
}

Answer 1

我遇到了同样的问题，我希望整行成为可点击的扩展器，正如 React Table 所称的那样。我所做的只是更改扩展器的尺寸以匹配整行并在该行前面设置一个 z 索引。这种方法的一个警告是，行本身上的任何可点击元素现在都将被全宽按钮覆盖。我的案例仅显示行中的元素，因此这种方法有效。

.rt-expandable {
  position: absolute;
  width: 100%;
  max-width: none;
  height: 63px;
  z-index: 1;
}

要删除扩展器图标，您只需执行以下操作:

.rt-expander:after {
  display: none;
}