reactjs - 在 React js 中使用搜索
问题描述
我想根据输入的输入过滤内容,我不知道我哪里出错了。每当我输入我的输入时,它就不会过滤内容,而是显示那里的所有内容。
function searchingFor(searchingTerm) {
return function(x){
console.log("searching",x);
return x.name.toLowerCase().includes(searchingTerm.toLowerCase())|| searchingTerm;
}
}
class Main extends React.Component{
componentWillMount(){
this.props.fetchTopicsTableContent(this.state.sortBy,'ASC',0,this.props.match.params.Occupation).then(result=> (this.setState({rows:result.payload.data})))
this.props.countTableContent(this.props.match.params.Occupation).then(result=>(this.setState({count:result.payload})));
}
constructor(props){
super(props);
this.state={
searchTerm:"",
rows:""
}
}
searchHandler(e){
this.setState({searchTerm:e.target.value})
// console.log("rows",this.state.rows)
{this.state.rows.filter(searchingFor(this.state.searchTerm)).map(item=>{
console.log(item);
// this.setState({rows:item})
})}
}
render(){
return(
<form>
<input type="text"
value={this.state.searchTerm}
onChange={this.searchHandler.bind(this)}
/>
</form>);}}
解决方案
this.setState({searchTerm:e.target.value})
#setState 是异步操作,如果您想完成操作,该操作将如何完成。
您应该使用回调函数作为 2d 参数:this.setState({searchTerm:e.target.value}, () => {...here is your code})
推荐阅读
- delphi - 如何在 Delphi 中使用 RTTI 或 TypeInfo 获取枚举的有效范围
- android - 将 Unit Test App Nunit Lite Xamarin 中的引用添加到 Xamarin 服务后重建失败
- php - 关闭浏览器时如何将非常繁重的任务的执行留在队列中(在后台运行)?
- node.js - 如何防止像 SQL 注入这样的 mongo?
- json - 如何迭代层次结构中的 JSON 对象?
- input - Angular6 Material - 使用带有自定义 ErrorStateMatcher 的输入的 Stepper
- typescript - Firebase 函数:未处理的错误 RangeError:超出最大调用堆栈大小
- html - 在条纹元素上使用 CSS 变量
- r - 使用 ggplot 和 geom_line 跟踪运动统计数据
- python - Pyinstaller - 从 Linux 将 python 转换为 exe