反应钩子，获取复选框 onChange 的值并传递给 submitForm

Question

我目前有一个工作钩子，它检查输入字段的 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>

Answer 1

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

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