Получение выбранных элементов в Fluent UI DetailsList - PullRequest
Новая
       75

Получение выбранных элементов в Fluent UI DetailsList

0 голосов
/ 28 апреля 2020

Я использую Fluent UI DetailsList . В этом примере компонент реализован как компонент класса, но я использую функциональный компонент.

У меня возникают трудности с получением выбранных элементов, я предполагаю и считаю, что моя реализация неверна. Проблема в том, что я не получаю ЛЮБЫЕ выбранные предметы. 

export const JobDetails = () =>  {
    const { actions, dispatch, isLoaded, currentTabJobs, activeTabItemKey } = useJobDetailsState()

    let history = useHistory();

    useEffect(() => {
        if (actions && dispatch) {
            actions.getJobListDetails()
        }
    }, [actions, dispatch])

    const getSelectionDetails = (): string =>  {
        let selectionCount = selection.getSelectedCount();

        switch (selectionCount) {
            case 0:
                return 'No items selected';
            case 1:
                return '1 item selected: ' + (selection.getSelection()[0] as any).name;
            default:
                return `${selectionCount} items selected`;
        }
    }

    const [selectionDetails, setSelectionDetails] = useState({})
    const [selection, setSelection] = useState(new Selection({
        onSelectionChanged: () => setSelectionDetails(getSelectionDetails())
    }))

    useEffect(() => {
        setSelection(new Selection({
            onSelectionChanged: () => setSelectionDetails(getSelectionDetails())
        }))
    },[selectionDetails])

    return (
        <div>
            <MarqueeSelection selection={selection}>
                <DetailsList
                    items={currentTabJobs}
                    groups={getGroups()}
                    columns={_columns}
                    selection={selection}
                    selectionPreservedOnEmptyClick={true}
                    groupProps={{
                        onRenderHeader: props => {
                            return (
                                <GroupHeader 
                                    {...props} 
                                    selectedItems={selection}
                                />
                            )
                        },
                        showEmptyGroups: true
                    }}
                />
            </MarqueeSelection>
        </div>
    )
}

export default JobDetails;
...