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是从服务器

返回的所有firstnames的值holidng

Answer 1

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

React-Typescript在输入三个字母

1 个答案: