Fluent UI 下拉菜单中的自定义数据属性

Question

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

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

有人可以帮我用 Fluent UI + React 实现这个吗？

Answer 1

在FluentUI/React中，它比这容易得多，不需要数据属性，你可以直接将自定义数据添加到选项列表中（并在事件处理程序中取回它，或者作为如果您使用“受控”方案，则选择值）。意思是，如果您没有特定的要求uirement 在 HTML 数据属性中为“其他”（例如 ui-自动化工具）存储额外的项目数据，那么您可以用这样的东西（注意 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

Fluent UI 下拉菜单中的自定义数据属性

Custom data attributes on Fluent UI dropdown

reactjs

spfx

fluent-ui