点击提交后如何清除输入字段？

问题描述

这是我的页脚部分，它具有以下形式， 提交后，我需要此表单来重置或清除输入， 我试图添加 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: "",})
     
   }