运行我的React应用时收到此警告

Question

警告：道具类型失败：您向没有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>
    );
  }
}

Answer 1

您的最后一个元素应该是按钮而不是输入。

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

将其更改为<button type="submit" value="Add Contact" className="btn btn-light btn-block" />