运行我的反应应用程序时收到此警告

Question

Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue . Otherwise, set either onChange or 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>
    );
  }
}

Answer 1

Your last element should be a button not an input.

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

Change it to <button type="submit" value="Add Contact" className="btn btn-light btn-block" />