Simple React forms

simple-react-form-controlled-external.jsx

// External state example (Redux e.g)

class SimplerReactForm extends React.Component {
 
  handleInputChange = (e) => {
    const { name, value } = e.target
    this.props.onChange({
      ...this.props.values,
      [name]: value
    })
  }
  
  handleSubmit = () => {
    // do stuff with this.props.values
  }
  
  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <input
          name="login"
          type="text"
          placeholder="login"
          value={this.props.values.login}
          onChange={this.handleChange}
        />
        <input
          name="password"
          type="password"
          placeholder="password"
          value={this.props.values.password}
          onChange={this.handleChange}
        />
        <button>
          submit
        </button>
      </form>
    )
  }
}

simple-react-form-controlled-local.jsx

// Local state example

class SimplerReactForm extends React.Component {
  
  state = {
    login: "",
    password: ""
  }

  handleInputChange = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  
  handleSubmit = () => {
    // do stuff with this.state
  }
  
  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <input
          name="login"
          type="text"
          placeholder="login"
          value={this.state.login}
          onChange={this.handleChange}
        />
        <input
          name="password"
          type="password"
          placeholder="password"
          value={this.state.password}
          onChange={this.handleChange}
        />
        <button>
          submit
        </button>
      </form>
    )
  }
}

simple-react-form-uncontrolled.jsx

// Uncontrolled form example

class SimplerReactForm extends React.Component {
  
  handleSubmit = e => {
    e.preventDefault();

    const formData = new FormData(e.target);
    // you can submit it like that
    // or you can covert it to a json
    const jsonData = Array
      .from(formData)
      .reduce((acc, [name, value]) => {
        acc[name] = value;
        return acc
      }, {})
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="login"
          type="text"
          placeholder="login"
        />
        <input
          name="password"
          type="password"
          placeholder="password"
        />
        <button>
          submit
        </button>
      </form>
    );
  }
}