我正在尝试通过onChange事件调用两个函数以动态响应搜索功能。在第一个函数中,我要为一个值设置状态,在第二个函数中,我必须调用该值并执行该函数。
我无法同时调用两个函数。我没有在此示例代码中添加模拟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事件必须同时调用这两个函数。
答案 0 :(得分:3)
您只能将处理程序分配给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()}
/>
答案 1 :(得分:0)
如果您需要道具,可以使用它
<FormControl
name="searching"
placeholder="Searching"
onChange={e => { this.functionOne(e); this.props.functionTwo(e)}
/>