,可以通过以下步骤实现:
npm install @fluentui/react
import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
import '@fluentui/react/lib/Dropdown.css';
state = {
selectedOption: undefined
};
handleDropdownChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
this.setState({ selectedOption: option });
};
render() {
const { selectedOption } = this.state;
return (
<Dropdown
options={[
{ key: 'option1', text: 'Option 1' },
{ key: 'option2', text: 'Option 2' },
{ key: 'option3', text: 'Option 3' }
]}
selectedKey={selectedOption ? selectedOption.key : undefined}
onChange={this.handleDropdownChange}
/>
);
}
在上述代码中,options属性定义了下拉菜单的选项,selectedKey属性用于指定当前选中的选项,onChange事件会在选项变化时触发。
以上就是在ReactJS中获取没有TypeScript的流畅UI下拉菜单的值的方法。如果需要了解更多关于Fluent UI的信息,可以访问腾讯云的Fluent UI产品介绍页面:Fluent UI产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云