EmailJS + React Hooks +'preventDefault'

Question

我已经与React一起工作了几个月，我决定尝试建立我的投资组合。在此基础上，我默认使用要通过EmailJS平台联系的Material UI表单。我敢肯定这很简单，但是我花了好几个小时才解决这个问题。我不知道问题出在Material UI Librarie的“自定义输入”还是其他与事件onClick相关的东西。这可能很简单，但是为了解决这个问题，我觉得我头晕目眩，比起初更困惑。谢谢！

这是带有表单验证程序的代码：

    const [values, setValues] = useState({
        name: '',
        email: '',
        message: '',
  });
  const handleChange = (name)=> (e) => {
        setValues({ ...values, [e.target.id]: e.target.value });
  };

  const isFormValid = () => {
        if (!values.name || !values.email || !values.message) {

      return false;}
      else {
      return true;}

  };

  const sendEmail =(e) => {
    e.preventDefault()
    emailjs.sendForm('gmail', 'template_AILAIHUt', e.target, 'user_kPqhCaNpQHv75H92RjVhj')
      .then((result) => {
          console.log(result.text + 'funciona');
      }, (error) => {
          console.log(error.text + 'no funciona');
      });
  }

  const handleSubmit = (e) => {
        if (!isFormValid()) {
      //message of error in the screen, maybe sweet alerts
      console.log('falta algo')
    }
    else{ sendEmail(e)}
    };



  return (
    <div className={classes.section}>
      <div className={classes.container}>
        <GridContainer justify="center">
          <GridItem xs={12} sm={12} md={4}>
            <Card>
              <form className={classes.form}>
                <CardHeader style={{ fontWeight: "fontWeightBold" }} color='primary' className={classes.cardHeader}>
                  <h4>Let's create something together </h4>

                </CardHeader>
                <CardBody>
                  <CustomInput
                    labelText="Name..."
                    id="name"
                    required={true}
                    formControlProps={{
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{ 
                      required: true,
                      onChange: handleChange(),
                      id:'name',
                      value: values.name,
                      type: "text",
                      endAdornment: (
                        <InputAdornment position="end">
                          <People className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Email..."
                    id="email"
                    type='email'
                    required={true}
                    onChange={handleChange()}
                    formControlProps={{
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{
                      required: true,
                      onChange: handleChange(),
                      id:'email',
                      value: values.email,
                      type: "email",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Email className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Be free..."
                    id="message"
                    required={true}
                    formControlProps={{
                      size: 'large', 
                      rows: '4',
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{
                      multiline: true,
                      required: true,
                      onChange: handleChange(),
                      id:'message',
                      value: values.message,
                      multiline: true,
                      type: "text",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Icon className={classes.inputIconsColor}>
                            <SendIcon  className={classes.inputIconsColor}/>
                          </Icon> 
                        </InputAdornment>
                      ),
                      autoComplete: "off"
                    }}
                  />
                </CardBody>
                <CardFooter className={classes.cardFooter}>
                  <Button simple color="primary" size="lg" onClick={(e) => handleSubmit()}>
                    Submit
                  </Button> 
                </CardFooter>
              </form>
            </Card>
          </GridItem>
        </GridContainer>
      </div>
    </div>
  );
}

Answer 1

因此，我在您的代码中看到了一些东西，我将在下面对其进行修复，并在每个修复程序的上方写一个大注释，以便您可以确定我在哪里更改了代码。

    const [values, setValues] = useState({
        name: '',
        email: '',
        message: '',
  });
  const handleChange = (name)=> (e) => {
        setValues({ ...values, [e.target.id]: e.target.value });
  };

  const isFormValid = () => {
        if (!values.name || !values.email || !values.message) {

      return false;}
      else {
      return true;}

  };

  const sendEmail = () => {
    emailjs.sendForm('gmail', 'template_AILAIHUt', e.target, 'user_kPqhCaNpQHv75H92RjVhj')
      .then((result) => {
          console.log(result.text + 'funciona');
      }, (error) => {
          console.log(error.text + 'no funciona');
      });
  }

  const handleSubmit = (e) => {
      // HERE: you always want to prevent default, so do this first
      e.preventDefault()
        if (!isFormValid()) {
           //message of error in the screen, maybe sweet alerts
           console.log('falta algo')
        } else{ 
          // HERE: so you dont have to pass the event down to send Email
          sendEmail()
        }
    };



  return (
    <div className={classes.section}>
      <div className={classes.container}>
        <GridContainer justify="center">
          <GridItem xs={12} sm={12} md={4}>
            <Card>
              <!-- HERE: use the FORM submit function and make sure to pass the event down to handleSubmit(e)@ -->
              <form className={classes.form} onSubmit={(e) => handleSubmit(e)}>
                <CardHeader style={{ fontWeight: "fontWeightBold" }} color='primary' className={classes.cardHeader}>
                  <h4>Let's create something together </h4>

                </CardHeader>
                <CardBody>
                  <CustomInput
                    labelText="Name..."
                    id="name"
                    required={true}
                    formControlProps={{
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{ 
                      required: true,
                      onChange: handleChange(),
                      id:'name',
                      value: values.name,
                      type: "text",
                      endAdornment: (
                        <InputAdornment position="end">
                          <People className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Email..."
                    id="email"
                    type='email'
                    required={true}
                    onChange={handleChange()}
                    formControlProps={{
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{
                      required: true,
                      onChange: handleChange(),
                      id:'email',
                      value: values.email,
                      type: "email",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Email className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Be free..."
                    id="message"
                    required={true}
                    formControlProps={{
                      size: 'large', 
                      rows: '4',
                      required: true,
                      fullWidth: true
                    }}
                    inputProps={{
                      multiline: true,
                      required: true,
                      onChange: handleChange(),
                      id:'message',
                      value: values.message,
                      multiline: true,
                      type: "text",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Icon className={classes.inputIconsColor}>
                            <SendIcon  className={classes.inputIconsColor}/>
                          </Icon> 
                        </InputAdornment>
                      ),
                      autoComplete: "off"
                    }}
                  />
                </CardBody>
                <CardFooter className={classes.cardFooter}>
                  <input type="submit" value="Submit" />
                </CardFooter>
              </form>
            </Card>
          </GridItem>
        </GridContainer>
      </div>
    </div>
  );
}

如果要使用表单并阻止提交默认事件，则必须使用输入类型的提交按钮和表单的onSubmit功能。

由于这是一个React应用，而且您根本不需要依赖表单事件，因此您也可以使用其他方法（并保留样式按钮）。有关如何使用自定义按钮提交表单的信息，请参见this guide。