CODEWITHSUNDEEP
javascriptreactjs
Ilja
Ilja

Reputation: 46547

Call 2 functions within onChange event

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

Answers (4)

kashif750
kashif750

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

Julia Stanina
Julia Stanina

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

diiN__________
diiN__________

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

Carl Vitullo
Carl Vitullo

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

Related Questions