AntD Автозаполнение раскрывающееся раскрывающееся на фокусе по умолчанию, как я могу предотвратить это?

Question

Я использую компонент AntD Автозаполнение , но не хочу видеть выпадающий список после фокусировки. Есть ли способ сделать это?

Рабочий пример: https://codesandbox.io/s/014y9k5vml

Мой код:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Icon, Input, AutoComplete, Button } from "antd";

const Option = AutoComplete.Option;

const dataSource = [
  {
    title: "AntDesign",
    count: 10000
  },
  {
    title: "AntDesign UI",
    count: 10600
  },
  {
    title: "AntDesign UI 有多好",
    count: 60100
  },
  {
    title: "AntDesign 是啥",
    count: 30010
  },
  {
    title: "AntDesign 是一个设计语言",
    count: 100000
  }
];

const options = dataSource.map(opt => (
  <Option key={opt.title} value={opt.title}>
    {opt.title}
    <span className="certain-search-item-count">{opt.count} 人 关注</span>
  </Option>
));

function Complete() {
  return (
    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
      <AutoComplete
        className="certain-category-search"
        dropdownClassName="certain-category-search-dropdown"
        dropdownMatchSelectWidth={false}
        dropdownStyle={{ width: 300 }}
        size="large"
        style={{ width: "100%" }}
        dataSource={options}
        placeholder="input here"
        optionLabelProp="value"
      />
    </div>
  );
}

ReactDOM.render(<Complete />, document.getElementById("container"));

Answer 1

Вы можете сохранить источник данных в состоянии компонента, инициализировать его пустым и реализовать обработчик для onSearch , который заполняет источник данных всем, что вам нужно.

Checkout Реализация Antd базового автозаполнения:

import { AutoComplete } from 'antd';

function onSelect(value) {
  console.log('onSelect', value);
}

class Complete extends React.Component {
  state = {
    dataSource: [],
  }

  handleSearch = (value) => {
    this.setState({
      dataSource: !value ? [] : [
        value,
        value + value,
        value + value + value,
      ],
    });
  }

  render() {
    const { dataSource } = this.state;
    return (
      <AutoComplete
        dataSource={dataSource}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={this.handleSearch}
        placeholder="input here"
      />
    );
  }
}

ReactDOM.render(<Complete />, mountNode);