如何解决点击提交后如何清除输入字段？
这是我的页脚部分，它具有以下形式， 提交后，我需要此表单来重置或清除输入， 我试图添加 event.target.reset();在 handleSubmit(event){} 中但不起作用， 我试图将变量添加为等于 '' 空，但什么也没发生。
这是句柄提交
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,};
const url = "http://localhost:3030/send-email";
const result = await fetch(url,{
method: "POST",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);
解决方法
您应该初始化状态，如下所示：
constructor(props) {
super(props);
this.state = {
name: "",email: "",number: "",message: "",subject: ""
}
然后你只需要重置状态，因为输入是受控的，它们也会更新。试试：
this.setState({
name: '',email: '',phone: '',subject: '',text: ''
});
我认为好的解决方案是在你的类组件中创建函数来重置状态，然后在获取和肯定结果之后你可以重置字段，否则你会抛出一些错误消息，所以
class Footer extends Component {
...
function resetState () {
this.setState({
name: '',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");
}
}
要在提交后将表单设置为空，只需将状态更改为空字符串或简单的“”。你的 handleSubmit 函数应该看起来像
async handleSubmit(event) {
event.preventDefault();
const data = {
name: this.state.name,};
const url = "http://localhost:3030/send-email";
const result = await fetch(url,{
method: "POST",});
console.log(result);
this.setState({
name: "",phone: "",subject: "",text: "",})
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。