Реагировать на хуки, получить значение флажка onChange и передать в submitForm

В настоящее время у меня есть рабочий хук, который проверяет 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>

person Anders Kitson    schedule 16.12.2019    source источник


Ответы (1)


В обработчике изменений определите, не установлен ли флажок, а затем установите состояние соответствующим образом:

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