Why bind is onChange

#1

My code didn’t work, so I tried “Get a hint”. it says

<input onChange = {this.handleChange.bind(this)}/>

but previously we binded the this keyword in the constructor but why this changed, is it the reason my code isn’t working?


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
 handleChange(event){
   this.setState({
     state: event.target.value
   })
 }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
         <input type="text" 
         value={this.state.input}      onChange="handleChange" />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36.

#2

hi,
the problem is with this part of your code

 onChange="handleChange"

Refresh your memory on how to set a method on event handler in React correctly.
Hint:

 onChange={this.method}

You still can bind the this keyword in the Constructor.
There are few binding patterns. Like binding in render (as you’ve seen in ''Get a hint" section). Or binding in Constructor (as you learned earlier) - besides binding in Constructor is the approach recommended for better performance in your application.

1 Like
#3

@orvalho I did that {this.method} but I cannot type in the text field.

#4

You shouldn’t write the word ‘method’ but replace it with actual method (in this case handleChange).

#5

@orvalho :smiley: I didn’t write method. I wrote this.handleChange , when I remove value it let me type and I cannot post the link to the quiz as forums wouldn’t allow me.

#6

I was scared that you did :slight_smile:

Looked some more into your code and found one more issue:

 handleChange(event){
   this.setState({
     state: event.target.value
   })
 }

Your component doesn’t have a property named ‘state’, but it has a property named ‘input’. So on change event you should be updating ‘input’ property and not non-existing ‘state’ property.

1 Like
#7

@orvalho thank u! oh my, I cannot read what I write, it was there whole time and I was focusing on removing other things.

1 Like
#8