Reputation: 46547
I'm a bit stuck with my component, I need to call onChange from props so
<input type="text" value={this.state.text} onChange={this.props.onChange} />
but also call another function within the component called handleChange()
that updates the state.text, I tried
<input type="text" value={this.state.text} onChange={this.props.onChange; this.handleChange} />
but this doesn't seem to work.
Upvotes: 45
Views: 176642
Reputation: 29
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} />
hope you got answer.
Upvotes: 0
Reputation: 41
If you want inline solution, you can do something like this:
<input type="text" value={this.state.text} onInput={this.props.onChange} onChange={this.props.handleChange} />
Difference between onInput and onChage is here:
Difference between "change" and "input" event for an `input` element
Upvotes: 4
Reputation: 7676
You can do it by putting the two functions in double quotes:
<input type="text" value={this.state.text} onChange="this.props.onChange(); this.handleChange();" />
This should work. But it would be better if you call the second function within the first one:
function testFunction() {
onChange();
handleChange();
}
Upvotes: 68
Reputation: 923
function(e) {this.props.onChange(e); this.handleChange(e)}.bind(this)
You might not need .bind(this)
, but I suspect you will.
This will create a new function on each render, so it'd be better in certain respects to have that function be a component method, but this should work.
Upvotes: 2