В настоящее время у меня есть рабочий хук, который проверяет onChange полей ввода, затем распространяет (я думаю, что это термин для ...
) их в переменную и отправляет их в функцию Lamda для отправки электронного письма с помощью sendgrid. Все это работает.
Однако, если я добавлю тип ввода checkbox
, я немного потеряюсь с точки зрения логики. Потому что я проверяю имя цели и связываю это с ее значением. Ну, у флажка есть отмеченное состояние, а не значение. Я предполагаю, что мне нужно сделать что-то вроде e.target.checked
в моем setFormState
, но как мне это сделать, а также e.target.value
и при этом распространить это на ...formState
?
Я реагирую нуб.
Вот мое состояние реакции и событие изменения и событие отправки
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");
}
}
Вот мой код формы
<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>