javascript - 在 Reat js 中使用来自状态的验证时无法修改文本字段
问题描述
我正在尝试构建一个 React 表单,我需要在其中将一些简单的数据提交到 post web 服务。我已经创建了表单,但是当我尝试编辑文本字段时,我无法做到。这样做的原因是我正在更新状态变量,因为用户在文本字段中键入。我不知道该怎么做,有人可以帮我解决这个问题。我的代码:
import React, { Component } from 'react';
import { Dropdown, DropdownButton, Button, Col } from "react-bootstrap";
import Form from 'react-bootstrap/Form';
const divStyle = {
marginTop: '30px'
};
export default class Venues extends Component {
constructor() {
super();
this.state = {
name: '',
address: '',
city: '',
state: '',
zip: '',
nameError: "",
addressError: "",
cityError: "",
stateError: "",
zipError: "",
};
}
onSubmit = (e) => {
e.preventDefault();
const isValid = this.validate();
if (isValid) {
console.log(this.state);
// get our form data out of state
const { name, address, city, state, zip } = this.state;
}
console.log("submit clicked");
// axios.post('/', { fname, lname, email })
// .then((result) => {
// //access the results here....
// });
}
handleChange = event => {
this.setState({
[event.target.name]: event.target.value
});
};
validate = () => {
let nameError = "";
let addressError = "";
let cityError = "";
let stateError = "";
let zipError = "";
if (!this.state.name) {
nameError = "Name cannot be blank";
}
if (!this.state.address) {
addressError = "Address can not be blank";
}
if (!this.state.city) {
cityError = "City can not be blank";
}
if (!this.state.state) {
stateError = "State can not be blank";
}
if (!this.state.zip) {
zipError = "Zipcode can not be blank";
}
if (nameError || addressError || cityError || stateError || zipError) {
this.setState({ addressError, nameError });
return false;
}
return true;
};
render() {
const { name, address, city, state, zip } = this.state;
return (
<div className="col-md-4 offset-md-4">
<div style={divStyle}>
<h3 >Create User</h3>
</div>
<Form onSubmit={this.onSubmit} >
<div className="form-group">
<Form.Label>Venue Name</Form.Label>
<Form.Control type="text" value={this.state.name} placeholder="Enter venue name" onChange={this.handleChange.bind(this)} />
<div style={{ fontSize: 12, color: "red" }}>
{this.state.nameError}
</div>
<Form.Label>Address</Form.Label>
<Form.Control type="text" placeholder="Enter street address" />
<div style={{ fontSize: 12, color: "red" }}>
{this.state.addressError}
</div>
<Form.Label>City</Form.Label>
<Form.Control type="text" value={this.state.city} placeholder="Enter city" />
<Form.Label>State</Form.Label>
<Form.Control type="text" value={this.state.state} placeholder="Enter state" />
<Form.Label>Zip</Form.Label>
<Form.Control type="text" value={this.state.zip} placeholder="Enter zipcode" />
<div style={divStyle}>
<Button type="submit" className="btn btn-primary mb-2">
Submit
</Button>
</div>
</div>
</Form>
</div>
)
}
}
解决方案
- 您没有将名称属性传递给输入字段
- 一些输入没有 onChange 处理程序。
工作代码:
import React, { Component } from "react";
import { Dropdown, DropdownButton, Button, Col } from "react-bootstrap";
import Form from "react-bootstrap/Form";
const divStyle = {
marginTop: "30px"
};
export default class Venues extends Component {
constructor() {
super();
this.state = {
name: "",
address: "",
city: "",
state: "",
zip: "",
nameError: "",
addressError: "",
cityError: "",
stateError: "",
zipError: ""
};
this.handleChange = this.handleChange.bind(this);
}
onSubmit = (e) => {
e.preventDefault();
const isValid = this.validate();
if (isValid) {
console.log(this.state);
// get our form data out of state
const { name, address, city, state, zip } = this.state;
}
console.log("submit clicked");
// axios.post('/', { fname, lname, email })
// .then((result) => {
// //access the results here....
// });
};
handleChange = (event) => {
this.setState((prevState) => ({
...prevState,
[event.target.name]: event.target.value
}));
};
validate = () => {
let nameError = "";
let addressError = "";
let cityError = "";
let stateError = "";
let zipError = "";
if (!this.state.name) {
nameError = "Name cannot be blank";
}
if (!this.state.address) {
addressError = "Address can not be blank";
}
if (!this.state.city) {
cityError = "City can not be blank";
}
if (!this.state.state) {
stateError = "State can not be blank";
}
if (!this.state.zip) {
zipError = "Zipcode can not be blank";
}
if (nameError || addressError || cityError || stateError || zipError) {
this.setState({ addressError, nameError });
return false;
}
return true;
};
render() {
const { name, address, city, state, zip } = this.state;
return (
<div className="col-md-4 offset-md-4">
<div style={divStyle}>
<h3>Create User</h3>
</div>
<Form onSubmit={this.onSubmit}>
<div className="form-group">
<Form.Label>Venue Name</Form.Label>
<Form.Control
type="text"
name="name"
value={this.state.name}
placeholder="Enter venue name"
onChange={this.handleChange}
/>
<div style={{ fontSize: 12, color: "red" }}>
{this.state.nameError}
</div>
<Form.Label>Address</Form.Label>
<Form.Control
type="text"
name="address"
value={this.state.address}
placeholder="Enter street address"
onChange={this.handleChange}
/>
<div style={{ fontSize: 12, color: "red" }}>
{this.state.addressError}
</div>
<Form.Label>City</Form.Label>
<Form.Control
type="text"
name="city"
value={this.state.city}
placeholder="Enter city"
onChange={this.handleChange}
/>
<Form.Label>State</Form.Label>
<Form.Control
type="text"
name="state"
value={this.state.state}
placeholder="Enter state"
onChange={this.handleChange}
/>
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
name="zip"
value={this.state.zip}
placeholder="Enter zipcode"
onChange={this.handleChange}
/>
<div style={divStyle}>
<Button type="submit" className="btn btn-primary mb-2">
Submit
</Button>
</div>
</div>
</Form>
</div>
);
}
}
推荐阅读
- ruby-on-rails - Postgres:来自多个连接的总和导致值超出预期
- python - 从 Python 中的字符串列表返回电子邮件地址的函数
- linux - 文件名前的 $1 是什么意思
- apache-kafka - Kafka Zookeeper 非标准端口
- javascript - 加载时如何在 xe:dialog 上运行 CSJS?
- python-3.x - 我们如何通过更改 python3 中的 2 个元素来绘制 3d 图像以获取 3 维向量的平均值?
- c# - 如何使用 DateTime.ParseExact 解析这种日期格式(“1999 年 5 月 1 日”)?
- css - 为什么我的字体不会加载到 Chrome localhost 之外的任何地方?
- java - 当 return 不是 1 时 Java 阶乘值发生变化
- kotlin - 如何在 Kotlin 上创建开放的匿名类实现接口