Saat ini saya memiliki hook yang berfungsi, yang memeriksa bidang input onChange, kemudian menyebarkannya (saya pikir itu adalah istilah untuk ...
) ke dalam variabel dan mengirimkannya ke fungsi Lamda untuk mengirim email dengan sendgrid. Semua itu berhasil.
Namun jika saya menambahkan tipe input checkbox
saya sedikit tersesat di sisi logika. Karena saya memeriksa nama target dan memasangkannya dengan nilainya. Ya, kotak centang memiliki status dicentang, bukan nilai. Saya berasumsi saya harus melakukan sesuatu seperti e.target.checked
di setFormState
saya namun bagaimana saya melakukannya serta e.target.value
dan masih menyebarkannya ke ...formState
?
Saya seorang pemula yang bereaksi.
Inilah status reaksi saya dan acara perubahan serta acara pengiriman
const [formState, setFormState] = React.useState({
name: "",
package: `${data.datoCmsPricing.title}`,
email: "",
subject: "",
weightLoss:"",
message: "",
})
const onChange = (e) => {
setFormState({...formState, [e.target.name]: e.target.value });
}
const submitForm = async (e) => {
e.preventDefault();
console.log("test");
try{
const response = await fetch("/.netlify/functions/sendmail", {
method: "POST",
body: JSON.stringify(formState),
})
if (!response.ok) {
console.log(response);
return
}
console.log("success email");
} catch(e){
console.log("error");
}
}
Ini kode formulir saya
<form onSubmit={submitForm}>
<label>
Name
<input
type="text"
name="name"
value={formState.name}
onChange={onChange}
/>
</label>
<label>
Email
<input
type="email"
name="email"
value={formState.email}
onChange={onChange}
/>
</label>
<label>
Subject
<input
type="text"
name="subject"
value={formState.subject}
onChange={onChange}
/>
</label>
<div>
<h3>Reasons for wanting to train</h3>
<label>
Weight Loss
<input
type="checkbox"
name="weightLoss"
checked={formState.weightLoss}
onChange={onChange}
/>
</label>
</div>
<label>
message
<textarea
name="message"
value={formState.message}
onChange={onChange}
/>
</label>
<button type="submit">Submit</button>
</form>