在Reaction中调用onChange事件内的两个函数-前端问题

call two functions within onchange event in react(在Reaction中调用onChange事件内的两个函数)

本文介绍了在Reaction中调用onChange事件内的两个函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用onChange事件在Reaction中动态调用两个函数以实现搜索功能。在第一个函数中，我设置了值的状态，而在第二个函数中，我必须调用该值并执行该函数。

我无法同时调用两个函数。我不会在此示例代码中添加模拟JSON。

 handleChange(e) {
   this.setState({ value: e.target.value.substr(0, 20) });
}
filterFunction(filteredSections) {
  let search = filteredSections;
  search = filteredSections.filter(somesection => somesection.insidesection && somesection.insidesection.name.toLowerCase().indexOf(this.state.value.toLowerCase()) !== -1);
return search;
    }
 render() {
    const filteredSections = othersection;
return(

<div>
<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => this.handleChange(e).bind(this)}
    onChange={() => this.filterFunction(filteredSections)}
/>
</div>
<div>
    {filteredSections.map(section =><othersection customization={section} } }
</div>
)
}

预期的onChange事件必须同时调用这两个函数。

推荐答案

一个处理程序只能分配给onChange一次。当您使用多个这样的赋值时，第二个赋值将覆盖第一个赋值。

您要么必须创建调用这两个函数的处理程序，要么使用匿名函数：

twoCalls = e => {
  this.functionOne(e)
  this.functionTwo()
}
.
.
.
<FormControl
    name="searching"
    placeholder="Searching"
    onChange={this.twoCalls}
/>

或...

<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => { this.functionOne(e); this.functionTwo() }}
/>

这篇关于在Reaction中调用onChange事件内的两个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！