Fluent UI 下拉列表中的自定义数据属性答案

【问题标题】：Custom data attributes on Fluent UI dropdownFluent UI 下拉列表中的自定义数据属性
【发布时间】：2021-08-19 23:11:56
【问题描述】：

我需要将自定义数据属性添加到 Fluent UI 下拉列表。在 javascript/html 中，我可以像这样添加它们。

option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option

有人可以帮我在 Fluent UI + React 中实现这一点吗？

【问题讨论】：

这些自定义属性应该作为 HTML 属性可见，还是只是数据属性（仅对 JavaScript 可见）？请注意，如果您查看下拉控件，则没有<option>s，它是由<div>s 和<button>s 构建的。因此，如果它用于 UI 自动化，它不会有太大帮助。意味着主要问题是这些属性的用途。
这是供 JS/TS 从 HTML 属性中读取的。这有助于我进行第二次 API 调用并在一次调用中获取所有数据元素。这不适用于 UI 自动化。希望这会有所帮助。

标签： reactjs spfx fluent-ui

【解决方案1】：

在 FluentUI/React 中，它比这更容易，不需要 data- 属性，您可以直接将自定义数据添加到选项列表中（并在事件处理程序中取回，或者作为选定值，如果您正在使用“受控”场景）。意味着，如果您没有特定要求在“其他”的 HTML 数据属性中存储额外的项目数据（如 ui-automation 工具），那么您可以使用类似的东西（注意 data 属性）：

const YourComponent = (props) => {

  const options = [
    { key: '7', 
      text: 'Data Quality', 
      data: { passign: true, minpt: 3, maxpt: 7 } 
    },
    { key: '42', 
      text: 'Weather Quality',
      data: { passign: true, minpt: 100500, maxpt: 42 } 
    },
  ];
  
  const onChange = (evt, item) => {
    const itemData = item.data;
    console.log(item.key, item.text, itemData);
  };
  
  return (
    <Dropdown 
      label="Select something" 
      options={options} 
      defaultSelectedKey='7'
      onChange={onChange} 
    />
  );
}

如果您想要一个“受控”控件（这个控件是“不受控”的），请查看下拉菜单的示例页面： https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

【讨论】：

非常感谢尼古拉。它可以正常工作并免于进行第二次 API 调用。
那你可以接受这个答案，这会给我一种温暖的成就感：D