[英]AntD Autocomplete dropdown opening on focus by default, how can i prevent it?
我正在使用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"));
您可以将数据源存储在组件状态中,将其初始化为空,然后为onSearch实现一个处理程序,以用所需的任何数据填充数据源 。
检出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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.