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组件中进行更改，此后它将不会自动选择。

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

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

1 个答案: