Question about React handleChange atribute

Question about React handleChange atribute
0

#1

Hi, I’m solving the challenges without problems, but I’m struggling to understand about this handleChange property in the React lessons. Here is an exemple code:

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* change code below this line */ }
        <GetInput input={ this.state.inputValue } handleChange={ this.handleChange } />
        <RenderInput input={ this.state.inputValue } />
        { /* change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

The handleChange property is a custom react property? What is this event parameter that I’m not passing but the function is receiving ? Can I just create my own custom properties just like this? Please, explain to me what is happening under the hood!

Thanks for the help and sorry if there are any weird parts in my questions, I’m not very proficient in English.


#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

if you look at this line in the render area which creates a input line and then invokes the function this.handleChange whenever someone changes anything in the input area (add/delete). This part is the ‘react’ part. but the actual function being called can be anything (any function name that handles the input).

Correction: see below…


#4

Ok, thanks and sorry for the inconvenience.


#5

Ok, I think I have a better understanding now. I’ll refer to the React reference to see what other properties can be used. Thanks for your answer.


#6

@hbar1st Actually, you can change handleChange to santaClaus if you want. This is NOT a special react/html keyword.

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.santaClaus= this.santaClaus.bind(this);
  }
  santaClaus(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* change code below this line */ }
        <GetInput input={ this.state.inputValue } santaClaus={ this.santaClaus} />
        <RenderInput input={ this.state.inputValue } />
        { /* change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.santaClaus}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

#7

hi Randell,

I thought handleChange was equivalent to an event like onClick and therefore is something defined specifically for an input or a button respectively?


#8

Nope. The onChange is an event and it gets assigned the value this.props.handleChange in the OP’s original code for the input element rendered by the GetInput component.

        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>

#9

ah ok, I see. So ‘handleChange’ is a prop then?


#10

Yes, it is a prop that is pass to the GetInput component, which is why it is accessible inside GetInput via this.props


#11

thanks. Follow up question. Why do they define handleChange function outside of GetInput? Why not just put it inside GetInput since that is the one using it?


#12

I am still learning React myself, but the general idea is you want to pass down all the handlers from your main component, so everything is centrally located. Also, you only want to modify state (if possible) in your main component. It just makes code organization better and certain logic centralized. You only “pass down” what the children components need.

Of course there will be exceptions to this rule when a child component will need to update a sibling of the same parent. In this case, the parent passes a callback to the children and each child would trigger that callback when it’s state changes. See below for how siblings can communicate using only React (no Redux).

A more experienced React user will probably give a much better answer than I just did.


#13

thanks. Maybe I will develop a ‘taste’ for this when I actually code with it. I’m used to UI handlers being near the UI they handle…


#14

We have a handleChange function that receives a object named ‘event’ and then update the main components state to it’s target.value property.

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

Randell, can you please explain how the event object is being passed to the handleChange function? I’m a bit confused since I doesn’t see the function being called nor this parameter passed. Thanks in advance.


#15

It was passed as a prop in the following line of the MyApp component.

 <GetInput input={ this.state.inputValue } handleChange={ this.handleChange } />

The handleChange={ this.handleChange } passes this.handleChane (which is the actual method handleChange in the MyApp component).


#16

Yes, this I understood. But what about the ‘event’ parameter in the handleChange function? When is it being passed to it’s function?

handleChange(event)


#17

Hi, just wanted to show you how the onChange event triggers the code for handleChange
It is done in the code section above. ‘onChange’ is a synthetic event that React gives us and we tell it what to do by assigning the related handler… (the related handler can be called anything we like but the synthetic event name is fixed)


#18

As @hbar1st points out, it is the onChange event where the event object gets passed to the handleChange method. This is just “normal” event handler behavior regardless of using React.

I say “normal” above, because React does change the way the normal onchange event works. Normally, the onchange event only triggers once a change is made to the textbox and the textbox is exited. React’s onChange triggers for any change to the actual value property of the textbox even before being exited.


#19

@hbar1st and @RandellDawson I think I have a better understading now. Thanks for your help.


#20

i appreciate the chance to have a discussion and learn.