反应钩子，抓取复选框的值 onChange 并传递给提交表单

Question

我目前有一个工作钩子，它检查输入字段的onChange，然后将它们传播(我认为这是...的术语(到一个变量中，并将它们发送到Lamda函数以使用sendgrid发送电子邮件。所有这些都在起作用。

但是，如果我添加输入类型checkbox我在逻辑方面有点迷茫。因为我正在检查目标的名称并将其与其值配对。那么复选框有一个选中的状态而不是一个值。 我想我必须在setFormState中做类似e.target.checked的事情，但是我如何做到这一点以及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>

Answer 1

在更改处理程序中，检测它是否是未选中的复选框，然后相应地设置状态：

if (e.target.type === 'checkbox' && !e.target.checked) {
setFormState({...formState, [e.target.name]: ''});
} else {
setFormState({...formState, [e.target.name]: e.target.value });
}