Javascript 如何在ReactJS中进行一次过滤器更改？

我有下面的代码

filterNames（）

当我点击这个按钮时，它会过滤

按钮：

<button className='search' onClick={this.filterNames}>
    Search
</button>

搜寻

输入：

<input type="text" onChange={ this.getValueInput }></input>

当我在输入中键入字母“a”时，它会过滤

恢复：我想在输入时不点击按钮进行过滤

我的代码全部：

类分页扩展了React.Component{
构造函数（）{
超级（）；
康斯特民族=[
{id:0，名称：“Jean”}，
{id:1，名字：“Jaquinha”}，
{id:2，名字：“里卡多”}，
{id:3，名字：“JaCA”}，
{id:4，名字：“Letiicia”}，
{id:5，姓名：“戴”}，
{id:6，名字：“Da iIIane”}，
{id:7，名字：“Tamy”}，
{id:8，名称：“Tamyresss”}，
{id:9，名字：“塔米雷斯”}，
{id:10，名字：“Abeu”}，
{id:11，名称：“abelll”}
];
此.state={
元素页面：3，
当前页面：0，
人民，
输入：“，
过滤：人民，
};
this.nextPage=this.nextPage.bind（this）；
this.previousPage=this.previousPage.bind（this）；
this.filterNames=this.filterNames.bind（this）；
this.getValueInput=this.getValueInput.bind（this）；
} 
getValueInput（值）{
this.setState（{input:value.target.value}）；
}
过滤器名称（）{
const{peoples}=this.state；
这是我的国家({
过滤：peoples.filter（item=>item.name.includes（this.state.input）），
当前页面：0
});
console.log（this.state.filtered）
} 
elementsOnScreen（）{
const{elementsPerPage，currentPage，filtered}=this.state；
返回过滤
.map（（item）=>
{item.name}此.remove（item.name）}>删除
）
.slice（当前页面*元素页面，当前页面*元素页面+元素页面）；
if（this.state.filtered.length<1）{
this.setState（{currentPage:this.state.currentPage-1}）
}
}
删除=（id）=>{
console.log（this.state.filtered.length）
if（this.state.filtered.length<0）{
this.setState（{currentPange:this.state.currenPage-1}）
}
this.setState（{filtered:this.state.filtered.filtered（item=>item.name！==id）}）
}
下一页（）{
console.log（this.state.filtered）
const{elementsPerPage，currentPage，filtered}=this.state；
如果（（当前页面+1）*元素页面=0）{
this.setState（{currentPage:this.state.currentPage-1}）；
}
}
render（）{
返回(
搜寻
以前的
下一个
当前页：{this.state.currentPage}
名称：{this.elementsOnScreen（）}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)

---

您可以更新getValueInput以处理筛选

getValueInput (evt) {
  const inputValue = evt.target.value;
  this.setState({ input: inputValue });
  this.filterNames(inputValue);
}

filterNames (inputValue) {
  const { peoples } = this.state;
  this.setState({
    filtered: peoples.filter(item => 
       item.name.includes(inputValue)),
    currentPage:0
  });
}

注意：您必须传入输入值，因为反应会对设置状态调用进行批处理。如果选中，则即使在调用setState之后，this.state.input仍将是以前的值。这就是为什么您必须依赖过滤器名称中的evt.target.value

Dan在这里很好地简要解释了如何处理状态调用。

---

听起来你可以做一些类似于

onChange={（）=>{/*调用所有处理程序*/}}

谢谢，伙计，我爱你，因为你绑定了

this.getValueInput=this.getValueInput.bind（this）代码
getValueInput
绑定到该类，并且可以通过
this
和
this访问组件类函数。filterNames
是组件中的函数之一。所发生的情况是，您正在调用该类函数并传递一个参数，以便
filterNames
可以在
参数中访问它。如果您需要了解有关函数的更多信息，我建议您先阅读
getValueInput (evt) {
  const inputValue = evt.target.value;
  this.setState({ input: inputValue });
  this.filterNames(inputValue);
}

filterNames (inputValue) {
  const { peoples } = this.state;
  this.setState({
    filtered: peoples.filter(item => 
       item.name.includes(inputValue)),
    currentPage:0
  });
}