javascript - 单击按钮时，我无法从列表中搜索项目

Question

当我在文本框中输入内容并单击搜索按钮时，它会显示该项目

单击按钮时，我无法从列表中搜索项目。我可以直接搜索项目而无需单击按钮，但我想搜索项目时

this.state = {
  list: [],
  search: '',
}

componentDidMount(){
    axios.get("https://restcountries.eu/rest/v2/region/africa").then(res=> 
    {
        this.setState({list : res.data})
    })
}
 
<label className="text-secondary">Search by : </label>&nbsp;
                
<input type="text" value={this.state.search} onChange={this.valueChange}> 
</input>&nbsp;

valueChange = (event) =>{
    this.setState({search : event.target.value})       
}
  
          
<button type="button" className="btn btn-info" 
   onClick=this.search}>Search</button>

search = () =>{
   this.state.list.filter(
        (item) => {
            return item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 ||
            item.capital.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 ||
            item.alpha3Code.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
        }
    )
}

标签： javascriptreactjs

Answer 1

你应该做的是将搜索逻辑移动到一个函数中，并设置 onclick 监听器来触发这个函数。

像这样的东西：

function SomeComponent(props){
  const [keyword, setKeyword] = useState("");

  const handler = () => {
    // Put your search logic here
    alert(`Do the search by ${keyword}`);
  };

  return (
    <div className="App">
      <input value={keyword} onInput={e => setKeyword(e.target.value)} />
      <br />
      <br />
      <button onClick={handler}>Search</button>
    </div>
  );
}