单击submit后，如何清除react中的输入字段？
单击submit后，如何清除react中的输入字段？
提问于 2021-04-28 06:16:26
这是我的页脚中有表单的部分，我需要这个表单在提交后重置或清除输入，我试图在handleSubmit(HandleSubmit){}中添加event.target.reset()；但没有起作用，我试图添加变量使其等于'‘空，但没有发生任何事情。
这是handleSubmit
async handleSubmit(event) {
event.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.number,
subject:this.state.subject,
text: this.state.message,
};
const url = "http://localhost:3030/send-email";
const result = await fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
});
console.log(result);
}这是表格
<form onSubmit={this.handleSubmit}>
<Grid container>
<Grid className={classes.gridOne} item xs={12}>
<TextField
className={classes.textArea}
fullWidth
id="name"
label="Name"
name="name"
type="text"
value={this.state.name}
onChange={this.handleChangeName}
/>
</Grid>
<Grid
item
lg={6}
md={12}
sm={12}
xs={12}
className={classes.gridTwo}
>
<TextField
className={classes.textArea}
fullWidth
id="email"
label="E-mail"
name="email"
type="email"
value={this.state.email}
onChange={this.handleChangeEmail}
/>
</Grid>
<Grid
item
lg={6}
md={12}
sm={12}
xs={12}
className={classes.gridThree}
>
<TextField
className={classes.textArea}
fullWidth
id="phone"
label="Phone"
name="number"
type="number"
value={this.state.number}
onChange={this.handleChangeNumber}
/>
</Grid>
<Grid item xs={12} className={classes.gridFour}>
<TextField
className={classes.textArea}
fullWidth
id="subject"
label="Subject"
name="subject"
type="text"
value={this.state.subject}
onChange={this.handleChangeSubject}
/>
</Grid>
<Grid item xs={12} className={classes.gridFour}>
<TextField
name="message"
id="message"
label="Message"
placeholder="Placeholder"
rows={4}
multiline
fullWidth
className={classes.textArea}
value={this.state.message}
onChange={this.handleChangeMessage}
/>
</Grid>
<Grid item xs={12}>
<Button
type="submit"
id="test"
className={classes.button}
variant="outlined"
>
Send Message
</Button>
</Grid>
</Grid>
</form>这就是所有的代码
import React, { Component } from "react";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { Link } from "@material-ui/core";
import Button from "@material-ui/core/Button";
class Footer extends Component {
constructor(props) {
super(props);
this.state = { name: "" };
this.state = { email: "" };
this.state = { number: "" };
this.state = { message: "" };
this.state = { subject: "" };
this.handleChangeName = this.handleChangeName.bind(this);
this.handleChangeEmail = this.handleChangeEmail.bind(this);
this.handleChangeNumber = this.handleChangeNumber.bind(this);
this.handleChangeMessage = this.handleChangeMessage.bind(this);
this.handleChangeSubject = this.handleChangeSubject.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeName(event) {
this.setState({ name: event.target.value });
}
handleChangeEmail(event) {
this.setState({ email: event.target.value });
}
handleChangeNumber(event) {
this.setState({ number: event.target.value });
}
handleChangeMessage(event) {
this.setState({ message: event.target.value });
}
handleChangeSubject(event) {
this.setState({ subject: event.target.value });
}
async handleSubmit(event) {
event.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.number,
subject:this.state.subject,
text: this.state.message,
};
const url = "http://localhost:3030/send-email";
const result = await fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
});
console.log(result);
}
state = {};
render() {
// const send = (props) => {
// sendMail(this.state.name, this.state.email, this.state.number,this.state.message);
// };
const { classes } = this.props;
return (
<div className={classes.backG}>
<Container className={classes.padContainer}>
<Grid container>
<Grid item lg={4} md={4} sm={12} xs={12}></Grid>
<Grid item lg={8} md={8} sm={12} xs={12}>
<Typography className={classes.titleTwo}>
Interested in doing a project together? Email me
</Typography>
<form onSubmit={this.handleSubmit}>
<Grid container>
<Grid className={classes.gridOne} item xs={12}>
<TextField
className={classes.textArea}
fullWidth
id="name"
label="Name"
name="name"
type="text"
value={this.state.name}
onChange={this.handleChangeName}
/>
</Grid>
<Grid
item
lg={6}
md={12}
sm={12}
xs={12}
className={classes.gridTwo}
>
<TextField
className={classes.textArea}
fullWidth
id="email"
label="E-mail"
name="email"
type="email"
value={this.state.email}
onChange={this.handleChangeEmail}
/>
</Grid>
<Grid
item
lg={6}
md={12}
sm={12}
xs={12}
className={classes.gridThree}
>
<TextField
className={classes.textArea}
fullWidth
id="phone"
label="Phone"
name="number"
type="number"
value={this.state.number}
onChange={this.handleChangeNumber}
/>
</Grid>
<Grid item xs={12} className={classes.gridFour}>
<TextField
className={classes.textArea}
fullWidth
id="subject"
label="Subject"
name="subject"
type="text"
value={this.state.subject}
onChange={this.handleChangeSubject}
/>
</Grid>
<Grid item xs={12} className={classes.gridFour}>
<TextField
name="message"
id="message"
label="Message"
placeholder="Placeholder"
rows={4}
multiline
fullWidth
className={classes.textArea}
value={this.state.message}
onChange={this.handleChangeMessage}
/>
</Grid>
<Grid item xs={12}>
<Button
type="submit"
id="test"
className={classes.button}
variant="outlined"
>
Send Message
</Button>
</Grid>
</Grid>
</form>
</Grid>
</Grid>
</Container>
</div>
);
}
}
export default withStyles(useStyles)(Footer);回答 3
Stack Overflow用户
发布于 2021-04-28 06:19:30
您应该初始化状态，如下所示：
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
number: "",
message: "",
subject: ""
}然后你只需要重置状态，因为输入是受控制的，它们也会更新。尝试：
this.setState({
name: '',
email: '',
phone: '',
subject: '',
text: ''
});Stack Overflow用户
发布于 2021-04-28 06:30:32
我认为好的解决方案是在你的类组件中创建函数来重置状态，然后在fetch和肯定的结果之后你可以重置字段，否则你可能会抛出一些错误消息，所以
class Footer extends Component {
...
function resetState () {
this.setState({
name: '',
email: '',
phone: '',
subject: '',
text: ''
});
}然后在你的handleSubmit函数中，你可以这样做：
async handleSubmit(event) {
event.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.number,
subject:this.state.subject,
text: this.state.message,
};
const url = "http://localhost:3030/send-email";
const result = await fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
});
console.log(result);
if (result === "OK") {
this.resetState();
}
else {
alert("Some error occurred");
}
}Stack Overflow用户
发布于 2021-04-28 06:36:32
为了在提交后将表单设置为空，只需将状态更改为空字符串或简单地"“。您的handleSubmit函数应该如下所示
async handleSubmit(event) {
event.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
phone: this.state.number,
subject:this.state.subject,
text: this.state.message,
};
const url = "http://localhost:3030/send-email";
const result = await fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
},
});
console.log(result);
this.setState({
name: "",
email: "",
phone: "",
subject: "",
text: "",
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67294682
复制相关文章
相似问题
DateTime与时间戳的比较
比较DateTime unix时间戳
无法将datetime.datetime与int进行比较；将datetime与unix时间戳进行比较
.Net DateTime.Now与PostgreSQL时间戳比较
MySQL:比较datetime和时间戳
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
