reactjs - 提交后重置reactjs表单
问题描述
我创建了一个 reactjs 表单,可以成功地将数据发送到 django rest api。我想在单击按钮后重置表单,但它一直给我一个错误,说“this.props.resetState() 不是一个函数。有什么办法可以重置之后创建的表单的所有输入提交?
import React, { Component } from "react";
import { Button, Form, FormGroup, Input, Label } from "reactstrap";
import axios from "axios";
import { API_URL } from "../constants";
class ClientForm extends React.Component {
constructor(props) {
super(props);
this.state = {
pk: 0,
name: "",
email: "",
business_name: "",
country: "",
};
}
componentDidMount() {
if (this.props.client) {
const {
pk,
name,
email,
phone,
business_name,
country,
} = this.props.client;
this.setState(pk, name, document, email, phone);
}
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
createClient = (e) => {
e.preventDefault();
axios.post(API_URL, this.state).then(() => {
this.props.reset();
this.props.toggle();
});
};
editClient = (e) => {
e.preventDefault();
axios.put(API_URL + this.state.pk, this.state).then(() => {
this.props.reset();
this.props.toggle();
});
};
defaultIfEmpty = (value) => {
return value === " " ? " " : value;
};
render() {
return (
<Form onSubmit={this.props.client ? this.editClient : this.createClient}>
<FormGroup>
<Label for="name">Name:</Label>
<Input
type="text"
name="name"
onChange={this.onChange}
value={this.defaultIfEmpty(this.state.name)}
/>
</FormGroup>
<FormGroup>
<Label for="email">Email:</Label>
<Input
type="email"
name="email"
onChange={this.onChange}
value={this.defaultIfEmpty(this.state.email)}
/>
</FormGroup>
<FormGroup>
<Label for="phone">Phone Number:</Label>
<Input
type="text"
name="phone"
onChange={this.onChange}
value={this.defaultIfEmpty(this.state.phone)}
/>
</FormGroup>
<FormGroup>
<Label for="business_name">Business Name:</Label>
<Input
type="text"
name="business_name"
onChange={this.onChange}
value={this.defaultIfEmpty(this.state.business_name)}
/>
</FormGroup>
<FormGroup>
<Label for="country">Country:</Label>
<Input
type="text"
name="country"
onChange={this.onChange}
value={this.defaultIfEmpty(this.state.country)}
/>
</FormGroup>
<Button>Send</Button>
</Form>
);
}
}
export default ClientForm;
解决方案
由于您在方法中使用受控组件,因此您可以将组件状态重置为一个initialState
值,然后this.setState(this.initialState)
在表单提交处理程序结束时调用。
就像是:
class ClientForm extends React.Component {
constructor(props) {
super(props);
this.initialState = {
pk: 0,
name: "",
email: "",
business_name: "",
country: "",
};
this.state = this.initialState;
}
(...)
handleSubmit = (e) => {
e.preventDefault();
this.props.client ? this.editClient() : this.createClient();
this.setState(this.initialState);
}
(...)
render() {
return (
<Form onSubmit={this.handleSubmit}>
(...)
</Form>
);
}
}
export default ClientForm;
注意不要忘记删除 and 方法中的参数e
和e.preventDefault()
调用。createClient()
editClient()
推荐阅读
- python - Google Colab:ModuleNotFoundError:没有名为“base_positioner”的模块
- windows - 如何使用 Windows Powershell 自动打印到 PDF
- angular - 本书声明中的第二个指令在哪里
- node.js - 代理错误:无法代理请求/从 localhost:3000 发送到 http://localhost:3001/
- php - 检索/收集(急切的负载)父母关系的最佳方法是什么?
- css - 带有覆盖所有空闲空间的文本和图像的网格纵横比
- express - 更正 url 到由 webpack 在 express 中生成的资产文件
- php - 通过 Post 方法将图像从 android 发送到 PHP 并将其保存在服务器中?
- python - 在 wlan1 而不是 wlan0 上运行烧瓶文件
- javascript - 在 Javascript 中列出自嵌套