Understanding ReactJS Controlled Form Components

Question

I am implementing the following code based on the following page: https://facebook.imtqy.com/react/docs/forms.html

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

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

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    let data = {
      isGoing: this.state.isGoing,
      numberOfGuests: this.state.numberofGuests
    }

    /* Send data in ajax request here */

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Some questions that I have:

• Why do we need to keep component values ​​in state? Why not, just take the values ​​we need when the form is submitted as would normally be done with standard JavaScript? The recommended way is apparently to reload the function renderfor each character typed or deleted. It makes little sense to me.
• setState this.setState() this.state.numberOfGuests , ? , React? , ?

Answer 1

, , , handleSubmit handleInputChanged. , React, , , , , setState . , setState. , 0,02 . , . e.preventDefault() handleSubmit .

, setState , setState, .

this.setState({
    colour: 'red'
}, () => {
    console.log(this.state.color)
});

red , , .

this.setState({
    colour: 'red'
});
console.log(this.state.color);

Answer 2

! :

1. -

. uncontrolled , onFormSubmit, - event.isGoing.value - plain ole JavaScript ( refs, React). , , , defaultValue={myDefaultValue}.

, , , . , , , . , , .

2. this.setState() ?

[, ,] , . this.setState() . , , setState, . : 3 , 2, . , , this.state "" , . , .

, (, AJAX) , this.setState() .

Answer 3

?

, submit.

. , React state . ( handleInputChange), React (, , ), .

, React , . :

Form updated -> handleInputChange -> state updated -> updated state passed to other components accessing it

, <Card />, <Form />, , - , , , , . , <Card /> , <Form />.

, React , , . . " " , . , , , .

---

setState

React docs:

setState() .

this.props this.state , .

, , , this.state . , ; , ( , ), React docs ( ), function, object:

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

If you are still wondering when you can use the method safely setState, use it if other components do not rely on state or when you do not need to save state (save to local storage or to the server). When working with larger projects, it is always recommended to use state containers to save yourself the hassle, such as Redux .