在 onChange 事件中调用 2 个函数

Call 2 functions within onChange event

本文关键字：函数 调用 onChange 事件      更新时间：2023-09-26

我的组件有点卡住了，我需要从道具调用 onChange 所以

<input type="text" value={this.state.text} onChange={this.props.onChange} />

而且还调用组件中名为 handleChange() 更新 state.text 的另一个函数，我试过

 <input type="text" value={this.state.text} onChange={this.props.onChange; this.handleChange} />

但这似乎行不通。

您可以通过将

两个函数放在双引号中来做到这一点：

<input type="text" value={this.state.text} onChange="this.props.onChange(); this.handleChange();" />

这应该有效。但是，如果在第一个函数中调用第二个函数会更好：

function testFunction() {
    onChange();
    handleChange();
}

如果你想要内联解决方案，你可以做这样的事情：

 <input type="text" value={this.state.text} onInput={this.props.onChange} onChange={this.props.handleChange} />

onInput 和 onChage 之间的区别在这里：

"输入">

元素的"更改"和"输入"事件之间的区别

function(e) {this.props.onChange(e); this.handleChange(e)}.bind(this)

你可能不需要.bind(this)，但我怀疑你会的。

这将在每个渲染上创建一个新函数，因此在某些方面最好将该函数作为组件方法，但这应该有效。

in react

function handleChange1(){ console.log("call 1st function");}
function handleChange2(){ console.log("call 2nd function");}
function handleChange(){ handleChange1(); handleChange2();}
<input type="text" value={this.state.text} onChange={this.props.handleChange} />

希望你得到答案。

相关文章：