如何避免下拉菜单自动选择选项

Question

我使用的是Dropdown from Semantic UI，如果我在打开时没有选择一个选项，它会自动从列表中选择第一个选项。

代码如下：

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

       <Dropdown
          className="hello-dropdown"
          placeholder="Company"
          onChange={this.searchHandlerCompany}
          options={companyOptions}
        />

它基于语义UI：

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

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

我不知道onChange函数和options对此是否有用，但它们如下所示：

 searchHandlerCompany = (event, data) => {
    const { getCompanies } = this.props;
    getCompanies({
      name: data.value,
      fridges: this.props.query.fridges,
      city: this.props.query.city,
      salesContact: this.props.query.salesContact,
      pagination: {
        currentPage: data.activePage,
        totalPages: this.props.query.pagination.totalPages,
      },
    });
  };

    const companyOptions = [
      { text: '0 - 2', value: '0-2' },
      { text: '3 - 5', value: '3-5' },
      { text: '5 - 10', value: '5-10' },
      { text: '+ 10', value: '11' },
    ];

你知道为什么它会自动选择吗?如何解决？

Answer 1

更改应在Dropdown component中进行，之后将不会自动选择。

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

export default ({ placeholder, options, onChange, name, className }) => (
  <Dropdown
    className={className}
    name={name}
    placeholder={placeholder}
    search
    selection
    options={options}
    onChange={onChange}
    clearable
    forceSelection={false} // added here 
    selectOnBlur={false} // and here
  />
);