1

我正在尝试使用mdbreact这样的方式在 reactjs 中生成一个可排序和可搜索的表

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const tableData = {
    columns: [
        {
            field: 'first_name',
            label: 'First Name'
        },
        {
            field: 'last_name',
            label: 'Last Name'
        },
        {
            field: 'age',
            label: 'Age'
        }
    ],
    rows: [
        {
            first_name: <a href='/example-route/John'>John</a>,
            last_name: 'Smith',
            age: 29
        },
        {
            first_name: <a href='/example-route/Jane'>Jane</a>,
            last_name: 'Doe',
            age: 34
        }
    ]
};

class Table extends React.Component {
    render() {
        return(
            <MDBDataTable data={tableData} />
        )
    }
}

export default Table;

表格渲染得很好，但由于正文中有<a></a>标签，相关列变得unsortable和unsearchable。

几天来，我一直在思考如何使该列可排序和可搜索，但是在阅读了大量内容之后，我却一无所获。

更新

似乎在 Chrome 中该列既不可搜索也不可排序，但在 Firefox 中，该列可排序但不可搜索。

4

1 回答 1

0

参考：https ://mdbootstrap.com/support/react/make-a-mdbdatatable-row-clickable/

我找到了一个保留的行键clickEvent，可以像这样使用：

import React from 'react';
import { MDBDataTable } from 'mdbreact';

class Table extends React.Component {

    handleClick(name) {
        console.log(name);
    }

    render() {
        return(
            <MDBDataTable data={{
                columns: [
                    {
                        field: 'first_name',
                        label: 'First Name'
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name'
                    },
                    {
                        field: 'age',
                        label: 'Age'
                    }
                ],
                rows: [
                    {
                        first_name: 'John',
                        last_name: 'Smith',
                        age: 29,
                        clickEvent: () => this.handleClick('john')
                    },
                    {
                        first_name: 'Jane',
                        last_name: 'Doe',
                        age: 34,
                        clickEvent: () => this.handleClick('jane')
                    }
                ]
            }} />
        )
    }
}

export default Table;

然后我可以以任何我喜欢的方式处理点击事件，也许可以window.location.href = '/' + name;用来模拟<a>标签所需的功能。

于 2020-05-29T07:52:24.100 回答