0

Grommet には、dataTable 内で単一または複数の選択のみを許可するソリューションが組み込まれていますか? 設定する前に配列をクリアするこの useState 関数を思いつきましたが、ユーザーが 2 回クリックする必要があるという逆反応があります。配列 > 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