IT技术 - 在 onChange 事件中调用 2 个函数 - 吾爱随笔录

IT技术 javascript reactjs

2021-05-10 08:08:03

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

但这似乎不起作用。

3个回答

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

<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)，但我怀疑您会需要。

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

其它你可能感兴趣的问题