如何在 Fluent UI DetailsList 组件上获取选中的项目

Question

I want to use DetailsList component https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist and select items. As I understand, the component doesn't provide us a prop to get selected items. I only see onActiveItemChanged prop which is only giving me single item but not all selected items.

• I checked the question below, but it seems the answer doesn't work

Getting selected items in Fluent UI DetailsList

• I wanted to create a state with an empty array and push or filter selected items into it, but there is also another problem. Scenario:

1. Click checkbox on header to select all items
2. If I click an item's checkbox, then it becomes unselected and other items still selected
3. If I click an item's any field instead of checkbox, then other items become unselected, and the one I clicked become selected.

Because of this reason -maybe I can also have other problem in the future-, I couldn't use state, as well.

I will be very glad if I can get current selected checkboxes on DetailsList component.

Answer 1

I found the answer.

• import Selection from @fluentui/react

• Add selection={selection} to DetailsList props

• and then do this before returning the component:

  const selection = new Selection({ onSelectionChanged: () => { const selectedItems = selection.getSelection(); // Do something with the selected items' console.log(selectedItems, 'ewgergre'); }, });

I didn't understand why it doesn't format my code.