Question

我正在使用AntD Autocomplete组件，但我不想在聚焦后看到下拉菜单。有办法吗？

工作示例：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

您可以将 datasource 存储在组件状态中，将其初始化为空，并为 onSearch 实现一个处理程序，以用所需的任何内容填充 datasource

检出Antd的基本AutoComplete实现：

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

默认情况下，AntD自动完成下拉菜单会以焦点打开，我该如何避免？

1 个答案: