[英]Error - PrimeReact Autocomplete suggestions not showing
https://primefaces.org/primereact/showcase/#/autocomplete
我试图在组件加载componentDidMount
中的一些数据后立即加载建议下拉列表。 suggestionsList
正在使用componentDidMount
中的obj
数据进行更新,但是未显示建议下拉列表。
简单地说,只要输入集中并且没有输入文本,就应该显示一个建议下拉列表。
class abcCmp extends React.Component {
state;
constructor() {
super();
this.state = {
suggestionsList: []
};
}
componentDidMount() {
let obj = [{'color':'red',name: 'Danny', id: '1'}];
this.setState({suggestionsList: [...obj]})
}
render(){
return (
<div className="containerBox">
<AutoComplete suggestions={this.state.suggestionsList}
minLength={1} placeholder="Add People" field="name" multiple={true}
autoFocus={true} />
</div>
)
}
如果您浏览了文档,还需要其他参数。 这些是: completeMethod
, value
, onChange
这些completeMethod
需要在您键入时显示过滤列表。 在completeMethod
中,您需要过滤您的数据,这就是您的下拉列表随着您键入更多内容而减少的方式。
您需要ref
来切换下拉功能,如果输入值为空且未选择任何值,则还需要检查焦点,以便切换下拉列表。
这是我创建的简单 POC,以供参考。 尝试输入D
代码:
import React from "react";
import { AutoComplete } from "primereact/autocomplete";
import "./styles.css";
let obj = [
{ color: "red", name: "Dagny", id: "1" },
{ color: "red", name: "kanny", id: "2" },
{ color: "red", name: "Dgnny", id: "3" },
{ color: "red", name: "Danny", id: "4" },
{ color: "red", name: "Dmnny", id: "5" },
{ color: "red", name: "Donny", id: "" }
];
class MyComponent extends React.Component {
myRef = React.createRef();
constructor() {
super();
this.state = {
suggestionsList: [],
selected: null,
inputValue: null
};
}
componentDidMount() {
this.setState({ suggestionsList: [...obj] });
}
searchList = (event) => {
let suggestionsList;
if (!event.query.trim().length) {
suggestionsList = [...obj];
} else {
suggestionsList = [...obj].filter((list) => {
return list.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
this.setState({ suggestionsList });
};
render() {
return (
<div className="containerBox">
<AutoComplete
suggestions={this.state.suggestionsList}
completeMethod={this.searchList}
minLength={1}
ref={this.myRef}
dropdown
inputId="my"
placeholder="Add People"
field="name"
onFocus={(e) => {
if (!this.state.inputValue && !this.state.selected) {
this.myRef.current.onDropdownClick(e, "");
}
}}
onKeyUp={(e) => this.setState({ inputValue: e.target.value })}
// completeOnFocus={true}
multiple={true}
autoFocus={true}
value={this.state.selected}
onChange={(e) => this.setState({ selected: e.value })}
/>
</div>
);
}
}
export default function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
演示: https://codesandbox.io/s/prime-react-autocomplete-forked-n3x2x?file=/src/App.js
在自动完成标签内添加下拉列表并添加 completeMethod 并将其绑定到搜索/过滤器 function,添加一个值以绑定所选值,向其添加一个 onChange function 您可以在此处找到完整的文档和工作示例: PrimeFaces React Autocomplete
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.