防止语义 UI 中的下拉菜单更改其显示值

Question

我正在使用 Semantic UI 中的 this Dropdown，我希望保持其顶部不变，即使选择了一个选项。

在他们的示例中，这是性别，当一个人选择女性的男性时，性别将被该价值取代。

这是一种避免这种变化的方法，因此即使选择了其中一个选项，下拉菜单也会显示性别？

这是代码：

import Dropdown from '../Dropdown.component';

<Dropdown // this is the Dropdown created based on the one from Semantic UI
  className="hello-dropdown"
  placeholder="Company"
  onChange={this.doSomething}
  options={someOptions}
/>;

Dropdown.component

import React from 'react';
import { Dropdown } from 'semantic-ui-react';

import './Dropdown.styles.scss';

export default ({ placeholder, options, onChange, name, className }) => (
  <Dropdown
    className={className}
    name={name}
    placeholder={placeholder}
    search
    selection
    options={options}
    onChange={onChange}
    clearable
  />
);

我猜这与placeholder={placeholder} 有关，但不确定

Answer 1

您可以将Dropdown 组件上的value 属性设置为空字符串。这样，它将始终显示占位符文本：

// ...
<Dropdown
  className={className}
  name={name}
  placeholder={placeholder}
  value=""
  search
  selection
  options={options}
  onChange={onChange}
  clearable
/>
// ...