123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- import React, { Component } from "react";
- import "./Form.css";
- import { api } from "./api";
- class Form extends Component {
- state = {
- name: "",
- email: "",
- number: "",
- optIn: true,
- };
- handleChange = (str) => {
- return e =>
- this.setState({ [str]: e.currentTarget.value });
- };
- handleSubmit = (e) => {
- e.preventDefault();
- api.addUser(this.state.name, this.state.email, this.state.number);
- };
- handlePromotionClick = () => {
- this.setState({ optIn: !this.state.optIn });
- };
- render() {
- return (
- // The data-testid attributes give us more security for tests, than those use for styling.
- <form data-testid="addUserForm" onSubmit={this.handleSubmit}>
- <h2>Request information</h2>
- <input type="text" name="name" data-testid="name"
- onChange={this.handleChange("name")}
- placeholder="Name"
- value={this.state.name} />
- <input type="text" name="email" data-testid="email"
- onChange={this.handleChange("email")}
- placeholder="Email"
- value={this.state.email} />
- <input type="text" name="number" data-testid="number"
- onChange={this.handleChange("number")}
- placeholder="Number"
- value={this.state.number} />
- <div className="form-item">
- <input type="checkbox" name="promo" id="promo" data-testid="checked"
- checked={this.state.optIn}
- onClick={this.handlePromotionClick}/>
- <label data-testid="promotionsP" className="promotions" htmlFor="promo">Receive promotions</label>
- </div>
- <button type="submit" data-testid="submitButton">Submit</button>
- </form>
- );
- }
- }
- export {
- Form
- };
|