0

Grommet 是否有一个内置的解决方案，只允许在数据表中进行单个或多个选择？我想出了这个 useState 函数，它在设置之前清除数组，但它有强制用户单击两次的不良反应。如果数组 > 1 用户单击，则将选择数组设置为 [] 强制用户再次单击。

import React from "react";
import ReactDOM from "react-dom";
import {Grommet, DataTable, Text, Meter, Box} from 'grommet';


const GridExample = () => {
    const [select, setSelect] = React.useState([])

    function handleRowSelect(selection) {
        console.log(`You picked ${selection}`);
        if (selection.length > 1) {
            setSelect(selection[selection.length - 1].toArray)
        } else {
            setSelect(selection)
        }

    }

    return (
        <Grommet>
            <DataTable
                select={select}
                onSelect={handleRowSelect}
                columns={[
                    {
                        property: 'name',
                        search: true,
                        header: <Text>Name</Text>,
                        primary: true,
                    },
                    {
                        property: 'percent',
                        search: true,
                        header: 'Complete',
                        render: datum => (
                            <Box pad={{vertical: 'xsmall'}}>
                                <Meter
                                    values={[{value: datum.percent}]}
                                    thickness="small"
                                    size="small"
                                />
                            </Box>
                        ),
                    },
                ]}
                data={[
                    {name: 'Alan', percent: 20},
                    {name: 'Bryan', percent: 30},
                    {name: 'Chris', percent: 40},
                    {name: 'Eric', percent: 80},
                ]}
            />
            <Text>Selected: {select}</Text>
        </Grommet>
    )
}

export default GridExample;

ReactDOM.render(
    <GridExample/>,
  document.getElementById("root")
);

更新：在函数中使用 Slice 修复了双击。

function handleRowSelect(selection) {
    if (selection.length > 1) {
        setSelect(selection.slice(-1))
    } else {
        setSelect(selection)
    }

}
4

1 回答 1

1

我认为没有内置的解决方案（用于索环 2.17.5）。

但是，您始终可以尝试以不同的方式进行操作select，onSelect例如，一种方法是onSelect在已经选择了一行后向其中添加条件并禁用选择选项：

 onSelect={select.length < 1 && handleRowSelect}

这将确保在任何给定点只选择一行。

如果您希望用户能够重置他们的决定，您可以随时添加一个清除选择数组的重置按钮，并且复选框将再次启用。

于 2021-09-03T21:24:59.820 回答