Saya telah bekerja dengan React selama beberapa bulan dan saya telah memutuskan untuk mencoba membangun portofolio saya. Bekerja di atasnya, saya menggunakan secara default formulir UI Material untuk dihubungi menggunakan platform EmailJS. Saya yakin ini sangat sederhana, tetapi saya telah berjam-jam membahas masalah ini tanpa menemukan solusinya. Saya tidak tahu apakah masalahnya terletak pada 'Input Kustom' dari Pustaka UI Material atau apakah itu hal lain yang terkait dengan acara onClick. Masalah saya adalah dengan "e.preventDefault" dari undefined. Ini mungkin sesuatu yang sederhana, tetapi untuk mencoba menyelesaikannya, saya pikir saya akhirnya menjadi pusing dan lebih membingungkan daripada awalnya. Terima kasih!

Ini adalah kode dengan validator untuk formulir:

    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>
  );
}
1
therrou 11 Maret 2020, 02:29

2 jawaban

Jawaban Terbaik

Harap pastikan untuk menambahkan kesalahan yang Anda terima atau pada titik mana kode Anda berhenti bekerja sehingga kami dapat memiliki gagasan yang lebih baik tentang apa yang salah.

Saya sudah melihat beberapa hal dalam kode Anda, saya akan memperbaikinya di bawah dan menulis komentar besar di atas setiap perbaikan sehingga Anda dapat mengidentifikasi di mana saya telah mengubah kode.

    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) => {
    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{ 
          sendEmail(e)
        }
    };



  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>
  );
}

Pengambilan terbesar sejauh ini, Anda sedikit membingungkan logika formulir. Formulir bergantung pada tombol kirim yang bertipe input. Juga, manfaatkan fungsi onSubmit bersama dengan elemen input submit.

Jika Anda ingin bekerja dengan formulir dan mencegah acara default saat pengiriman, Anda harus menggunakan tombol kirim jenis input dan fungsi onSubmit formulir. Karena ini adalah aplikasi reaksi dan Anda tidak mengandalkan kejadian formulir sama sekali, Anda juga dapat melakukannya secara berbeda (dan mempertahankan tombol gaya Anda). Lihat panduan ini tentang cara mengirimkan formulir Anda dengan tombol khusus.

0
Andre 11 Maret 2020, 00:11

Punya masalah yang sama, selesaikan dengan menambahkan id ke formulir dan meneruskannya ke metode emailJS.

Tambahkan form-id ke metode emailjs:

emailjs
  .sendForm(
    "service_<id>",
    "template_<id>",
    "#contact-form",
    "user_<id>"
  )

Kemudian ke tag formulir:

id="contact-form"
0
Tomas Cabral Hunter 14 April 2021, 16:08