在 onChange 事件中调用 2 个函数

Question

我的组件有点卡住了，我需要从 props 调用 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} />

但这似乎不起作用。

原文由 Ilja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过将两个函数放在双引号中来实现：

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

这应该工作。但是如果你在第一个函数中调用第二个函数会更好：

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

原文由 diiN__________ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

onInput 和 onChage 的区别在这里：

`input` 元素的“更改”和“输入”事件之间的区别

原文由 Julia Stanina 发布，翻译遵循 CC BY-SA 4.0 许可协议