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

Question

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

这是代码：

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' },
    ];

知道为什么它会自动 selecting 以及如何解决它吗？

Answer 1

应该在下拉组件中进行更改，之后不会自动选择。

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
  />
);

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

How to avoid the Dropdown to autoselect an option

javascript

reactjs

drop-down-menu

semantic-ui