How to properly bind a function in a onChange event?

Question

I have an onChange prop like so:

onChange={ (value) => this._onChange(value) }

and this works perfectly fine. However, if I try to abstract that so that I'm not using an inline function, I get an error.

_onChangeHandler = () => (value) => this._onChange(value)

Then in the component,

onChange={ this._onChangeHandler() }

This completely breaks the component. Why does this not work?

Update:

The onChange is for a form field, and in the input element, when I type in it, I see [object Object]

In what way does it not work? Are you getting error messages? — speckledcarp, May 15 '17 at 17:16
Could you post a more complete code snippet? Also, can you determine what is being called? (Maybe putting console.log messages in your various handlers?) — speckledcarp, May 15 '17 at 17:19

score 0 · Answer 1 · answered May 15 '17 at 17:11

0

I normally do

onChange={ this.onChange.bind(this) }

So you can use this reference.

answered May 15 '17 at 17:11

null_pointer

1,779
4
19
38

score 0 · Answer 2 · answered May 15 '17 at 17:11

0

Do you just need to execute your factory method?

onChange={ this._onChangeHandler() } // <--notice the parens

answered May 15 '17 at 17:11

speckledcarp

6,196
4
22
22

I assumed that you had a reason for using a factory method. Otherwise, @Michael's solution is probably better. (Although I think you might want to move the bind to the constructor so it's not re-run on every render) – speckledcarp May 15 '17 at 17:13
@specklecarp Even with the invocation, it doesn't work. – TheRealFakeNews May 15 '17 at 17:15

Tharaka Wijebandara · Answer 3 · 2017-05-15T17:22:18.377

I think you should use

_onChangeHandler = (value) => this._onChange(value)

instead of

_onChangeHandler = () => (value) => this._onChange(value)

Because this returns a function which returns a function which calls this._onChange with given value.

But what you really want is a function which calls this._onChange with given value.

Also, don't call the function in your JSX, instead just assign it. Otherwise what you assign for onChange is what returned by the function.

onChange={ this._onChangeHandler }

score 0 · Answer 4 · answered May 15 '17 at 17:39

In the following case, you are violating the syntax for arrow function in

_onChangeHandler = () => (value) => this._onChange(value)

An arrow function takes the function params afte the = sign an the function body after the => sign, so it should be

_onChangeHandler = (value) => this._onChange(value)

Also when you call like

   onChange={ this._onChangeHandler() }

You are not assigning the onChange event a function but a value which is evaluated everytime the component renders, now since your call this._onChange(value) in this function, and it may perform an action that will lead to the DOM being rendered again, so onChange will be evaluated again and hence the function, thus going into an infinite loop and breaking the code. You should vall it like

onChange={ this._onChangeHandler.bind(this,value)}

or

onChange={()=> this._onChangeHandler(value) }

score 0 · Answer 5 · edited May 23 '17 at 12:03

You need to bind _onChangeHandler to the component, which has 2 ways:

1/ Using .bind() manually:

_onChangeHandler(value) {
  return this._onChange(value);
}

Then in the component: (bind the method here)

onChange={ this._onChangeHandler.bind(this) }

2/ Using es6's syntax, so the _onChangeHandler is bound by itself:

_onChangeHandler = (value) => this._onChange(value);

Then in the component: (don't use this._onChangeHandler(), remove the brackets)

onChange={ this._onChangeHandler }

=====

If this doesn't work yet, feel free to post some errors on your console, thanks

For your reference on how to bind methods, please read my answer here:

how to read this.props in a function

How to properly bind a function in a onChange event?

5 Answers5