#react #form

controlled react form

export default class ControlledForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value1: "", value2: "", value3: "" };

    this.handle1 = this.handle1.bind(this);
    this.handle2 = this.handle2.bind(this);
    this.handle3 = this.handle3.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handle1(event) {
    this.setState({
      value1: event.target.value
    });
  }
  handle2(event) {
    this.setState({
      value2: event.target.value
    });
  }
  handle3(event) {
    this.setState({
      value3: event.target.value
    });
  }

  handleSubmit(event) {
    console.log("A name was submitted: " + this.state.value1);
    console.log("A name was submitted: " + this.state.value2);
    console.log("A name was submitted: " + this.state.value3);
    event.preventDefault();
  }

  render() {
    return (
      <Container>
        <Form className="form-group" onSubmit={this.handleSubmit}>
          <input
            className="form-control"
            placeholder="field 1"
            type="text"
            value={this.state.value1}
            onChange={this.handle1}
          />
          <input
            className="form-control"
            placeholder="field 2"
            type="text"
            value={this.state.value2}
            onChange={this.handle2}
          />
          <input
            className="form-control"
            placeholder="field 3"
            type="text"
            value={this.state.value3}
            onChange={this.handle3}
          />
          <input className="btn btn-primary" type="submit" value="Submit" />
        </Form>
      </Container>
    );
  }
}