Получение этого предупреждения при запуске моего приложения реакции - PullRequest
Новая
       17

Получение этого предупреждения при запуске моего приложения реакции

0 голосов
/ 17 июня 2020

Предупреждение. Неудачный тип опоры: вы предоставили опору value для поля формы без обработчика onChange. Это отобразит поле только для чтения. Если поле должно быть изменяемым, используйте defaultValue. В противном случае установите либо onChange, либо readOnly.

AddContact. js

import React, { Component } from "react";

export default class AddContact extends Component {
  state = {
    name: "",
    email: "",
    phone: "",
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  };
  onChanger = (e) => this.setState({ [e.target.name]: e.target.value });

  render() {
    // const { name, email, phone } = this.state;
    return (
      <div className="card mb-3">
        <div className="card-header">Add Contact</div>
        <div className="card-body">
          <form onSubmit={this.onSubmit}>
            <div className="form-group">
              <label htmlFor="name">Name</label>
              <input
                type="text"
                name="name"
                onChange={this.OnChanger}
                value={this.state.name}
                className="form-control form-control-lg"
                placeholder="Name.."
              />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email</label>
              <input
                type="email"
                name="email"
                onChange={this.OnChanger}
                value={this.state.email}
                className="form-control form-control-lg"
                placeholder="Email.."
              />
            </div>
            <div className="form-group">
              <label htmlFor="phone">Phone</label>
              <input
                type="text"
                name="phone"
                onChange={this.OnChanger}
                value={this.state.phone}
                className="form-control form-control-lg"
                placeholder="Phone.."
              />
            </div>
            <input
              type="submit"
              value="Add Contact"
              className="btn btn-light btn-block"
            />
          </form>
        </div>
      </div>
    );
  }
}

1 Ответ

1 голос
/ 17 июня 2020

Последним элементом должна быть кнопка, а не ввод. 

<input
  type="submit"
  value="Add Contact"
  className="btn btn-light btn-block"  />

Измените его на <button type="submit" value="Add Contact" className="btn btn-light btn-block" />

...