React-Typescript 输入三个字母后自动提示显示结果

Question

我在 NPM create-react-ts 命令之后创建了两个 react-typescript 应用程序， 之后，我为一个应用程序安装了 react-search-box 软件包之一，然后为其他应用程序安装了 react-autosuggest。

做了几处修改，但需要帮助。我需要包含一个功能，即只有在有人输入三个或更多字母后，两个搜索框才应在下拉列表中显示结果。 例如：- 最初有人键入“A”，然后显示结果，但现在应该在有人键入三个字母“TRU”或“ABC”等时显示结果

知道如何修改现有应用程序吗？？

下面是我的应用程序的结构.....

 export class myApp extends React.Component<any,any> {  
  constructor() {
  super();
  this.state = {
  data: [],
  loading: false
};}
 componentDidMount(){
this.setState({
  loading: true});

fetch('serviceUrl......')
.then(res => res.json())
.then(data => {
  this.setState({
    data: data.items, 
    loading: false
  });
})}handleChange(event) {
console.log(event);}

  render(){return (
<div className="div_search">
          <Search
            data={ this.state.data }                
            onChange={ this.handleChange.bind(this.state.data) }
            placeholder="Enter the name..."
            class="search_box"
            searchKey="fName" 
          />)}

fName 是保留从服务器返回的所有名字的值

Answer 1

您可以编写逻辑onChange事件并获取输入的当前值并在输入长度为3时进行状态更改。