React hooks, ambil nilai kotak centang onChange dan teruskan ke submitForm

Saat ini saya memiliki hook yang berfungsi, yang memeriksa bidang input onChange, kemudian menyebarkannya (saya pikir itu adalah istilah untuk ...) ke dalam variabel dan mengirimkannya ke fungsi Lamda untuk mengirim email dengan sendgrid. Semua itu berhasil.

Namun jika saya menambahkan tipe input checkbox saya sedikit tersesat di sisi logika. Karena saya memeriksa nama target dan memasangkannya dengan nilainya. Ya, kotak centang memiliki status dicentang, bukan nilai. Saya berasumsi saya harus melakukan sesuatu seperti e.target.checked di setFormState saya namun bagaimana saya melakukannya serta e.target.value dan masih menyebarkannya ke ...formState?

Saya seorang pemula yang bereaksi.

Inilah status reaksi saya dan acara perubahan serta acara pengiriman

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");

  }
}

Ini kode formulir saya

<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 sumber


Jawaban (1)


Di pengendali perubahan Anda, deteksi apakah kotak centangnya tidak dicentang, lalu atur statusnya sesuai:

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