javascript - 运行我的反应应用程序时收到此警告
问题描述
警告:失败的道具类型:您在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>
);
}
}
解决方案
您的最后一个元素应该是按钮而不是输入。
<input
type="submit"
value="Add Contact"
className="btn btn-light btn-block" />
将其更改为<button type="submit" value="Add Contact" className="btn btn-light btn-block" />
推荐阅读
- d - 将 std.algorithm.iteration.sum 与 Duration[] 一起使用
- amazon-web-services - 在父 AWS 主域上创建的子域不起作用
- android - 在滑动时上下滑动片段
- java - Maven POM file for running tests(not JUnit)
- java - How to implment SpanQuery with MultiFieldQuery in java using lucene
- c# - 将字符串数组与“FileInfo / GetFiles”进行比较
- java - 将循环遍历数组java中的条目的while循环
- javascript - One or more parameter values were invalid: An AttributeValue may not contain an empty string
- jquery - 如何使克隆元素更改其关联(克隆)亲属
- ajax - 模态表单未提交用户输入