FluentUI/React - 获取动态复选框列表 onChange 的键

Question

使用 React 17 和 Fluent UI，我正在尝试创建一个动态的复选框列表。我已经创建了复选框列表，但是我正在努力获取每个复选框被选中时的 key，以更新状态，该状态应该是一个包含所有选定复选框的键的数组。

这是一个代码沙箱，其中包含一个最小的可重现示例： https://codesandbox.io/s/heuristic-parm-1l3yyc?file=/src/App.tsx

我愿意接受使用不同于复选框键的其他属性来存储值的建议，但我仅限于使用 Fluent UI.

这是我用来生成复选框列表的代码（这是有效的）。 profiles 是创建的对象数组，此代码中使用的唯一属性是 name 和 token，它们都是字符串：

const getProfileCheckboxes = () => {
    var profiles = ProjectManager.getProfileList();
    const checkboxes = profiles.map(profile => 
        <Checkbox
            label={profile.name}
            defaultChecked={true}
            onChange={onChangeProfileCheckbox}
            key={profile.token}
        />
    );
    return checkboxes;
}

下面是我遇到问题的地方，我已经为这个功能尝试了很多东西，包括我在 Stack Overflow 上找到的相关问题的所有答案，但我没有运气。

selectedProfiles 默认为包含所有配置文件标记的数组。

const onChangeProfileCheckbox = (ev: any) => {
    const value = "key of profile"; // Placeholder
    const checked = false; // Placeholder
    if (checked) {
        selectedProfiles.push(value);
    } else {
        setSelectedProfiles(prev => prev.filter(x => x !== value));
    }
}

有人知道我如何在 onChange() 函数中获取键和检查值吗？

checked 值不太重要，因为我可以检查密钥是否已包含在状态数组中，但我认为如果我可以直接获取值会更清晰。

感谢您的帮助！

Answer 1

您可以直接从我们从 onChange

获得的事件中获取 checked 值

key 属性由 React 在后台使用，不会向您公开。您需要使用自定义属性并将该数据传递给您，或者根据您的情况，将其直接传递给 onClick 函数

Checkbox 应该是这样的：

 <Checkbox
    label={profile.name}
    defaultChecked={true}
    onChange={(ev) => onChangeProfileCheckbox(ev, profile.token)}
    key={profile.token}
  />

你的 onChange 函数应该是这样的：

const onChangeProfileCheckbox = (ev: ChangeEvent<HTMLInputElement>, token: string) => {
      const value = token;
      const checked = ev.target.checked;
      if (checked) {
          selectedProfiles.push(value);
       } else {
          setSelectedProfiles(prev => prev.filter(x => x !== value));
        }
    };

这里是 link 到 codesandbox 结果

FluentUI/React - 获取动态复选框列表 onChange 的键

FluentUI/React - Get key of dynamic checkbox list onChange

checkbox

typescript

reactjs

fluent-ui