What's the difference between value and onChange?

JavaScript
1

Could you tell me what the difference between “value = {this.state.input}” and "onChange = {this.handleChange}?
as you see, “value ={this.state.input}” passes a value of {this.state.input} to input element, and {this.handleChange} turns out to be{this.state.input} too, cause hanleChange is a function, which returns the value of input, so what is the difference? Am I right?

  **Your code so far**


class MyForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    submit: ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
handleSubmit(event) {
  // Change code below this line
  this.setState({
    submit: this.state.input
  })
  event.preventDefault()
  // Change code above this line
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        {/* Change code below this line */}
        <input value = {this.state.input} onChange = {this.handleChange} />
        {/* Change code above this line */}
        <button type='submit'>Submit!</button>
      </form>
      {/* Change code below this line */}
      <h1>{this.state.submit}</h1>
      {/* Change code above this line */}
    </div>
  );
}
}

  **Your browser information:**

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

Challenge: Create a Controlled Form

Link to the challenge:

2

A better way to view it is that the handleChange function will update state every time the user types something.

2 Likes
3

Thanks, another question is that onChange get the event before the handleChange? When we write something in the field, the first one who detect the change is onChange or handleChange, I’ve always been confused about this, thanks!

4

The onChange event occurs when the value has been changed.
handleChange is just the name of the function we create to update the state for us.

You could just get rid of the handleChange function all together and just pass a function straight into onChange

<input
  value={this.state.input}
  onChange={(event) => {
    this.setState({
      input: event.target.value
    });
  }}
/>;

If you ran this code, then the challenge would still pass without the handleChange function.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    // Change code below this line
    this.setState({
      submit: this.state.input
    })
    event.preventDefault()
    // Change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/* Change code below this line */}
          <input value={this.state.input} onChange={(event) => {
            this.setState({
              input: event.target.value
            });
          }} />
          {/* Change code above this line */}
          <button type='submit'>Submit!</button>
        </form>
        {/* Change code below this line */}
        <h1>{this.state.submit}</h1>
        {/* Change code above this line */}
      </div>
    );
  }
}

Hope that helps!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.