如何让Fluent UI Dropdown选中选项后仍显示占位文本？

架构老林

2026-8-5

解决方案

要让Dropdown始终显示Examples of sentences，核心是不让Dropdown的选中状态同步到自身的显示文本上。你只需要给Dropdown组件添加value=""属性，强制它始终显示占位符文本即可。

修改后的代码如下：

import {
  FluentProvider,
  webLightTheme,
} from '@fluentui/react-components';
import {
  Dropdown,
  Option
} from '@fluentui/react-components/unstable';
import { TextField } from '@fluentui/react';
import * as React from 'react';

export default class Grouped extends React.Component<{}, { value: any }> {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  land = ['A long sentence', 'Another long sentence', 'Another another long sentence'];

  render() {
    return (
      <div>
        <FluentProvider
          className="fluent-provider"
          style={{ display: 'flex' }}
          theme={webLightTheme}
        >
          {/* 添加value=""，强制Dropdown始终显示placeholder */}
          <Dropdown
            placeholder="Examples of sentences"
            value=""
            onOptionSelect={(e, data) => {
              if (data.optionText !== undefined) 
                this.setState({ value: data.optionText });
            }}
          >
            {this.land.map((option) => (
              <Option key={option}>{option}</Option>
            ))}
          </Dropdown>
        </FluentProvider>
        <br/>
        <TextField
          label="Write a sentence:"
          value={this.state.value}
          multiline
          rows={3}
          autoAdjustHeight
          resizable={false}
        />
      </div>
    );
  }
}