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

【问题标题】：React hooks, grab value of checkbox onChange and pass to submitForm反应钩子，抓取复选框 onChange 的值并传递给 submitForm
【发布时间】：2020-04-09 08:41:20
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

【讨论】：