Saya menggunakan formik untuk membuat formulir dengan dua tombol radio:

const RadioButton = ({
  field: { name, value, onChange, onBlur },
  id,
  label,
  className,
  onSelect,
  ...props
}) => {
  return (
    <div>
      <input
        name={name}
        id={id}
        type="radio"
        value={id}
        checked={id === value}
        onChange={onChange}
        onClick={onSelect}
        onBlur={onBlur}
        {...props}
      />
      <label htmlFor={id}>{label}</label>
    </div>
  );
};

const App = () => (
  <div className="app">
    <Formik
      initialValues={{
        radioGroup: ""
      }}
      render={({ values }) => (
        <form>
          <Field
            component={RadioButton}
            name="radioGroup"
            id="radioOption1"
            onSelect={() => console.log(values)}
            label="Option 1"
          />
          <Field
            component={RadioButton}
            name="radioGroup"
            id="radioOption2"
            onSelect={() => console.log(values)}
            label="Option 2"
          />
          <p>{JSON.stringify(values)}</p>
        </form>
      )}
    />
  </div>
);

Tujuan saya adalah untuk mendapatkan pemberitahuan ketika elemen radio dipilih. Jadi saya meneruskan callback onSelect ke komponen RadioButton dan menambahkannya ke handler onClick bidang input: onClick={onSelect}.

Notifikasi berfungsi. Namun dalam

onSelect={() => console.log(values)}

Nilai tidak berisi radio yang dipilih. Cukup aneh,

<p>{JSON.stringify(values)}</p>

Menunjukkan nilai yang dipilih seperti yang Anda lihat di sini:

enter image description here

Cobalah sendiri:

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-vguym

Tahu mengapa ini terjadi?

1
Upvote 20 Agustus 2019, 06:49

1 menjawab

Jawaban Terbaik

Anda menggunakan onSelect yang terjadi segera setelah Anda mengklik elemen (sebelum rendering ulang). Ini menunjukkan kepada Anda status values pada saat itu yang merupakan objek initialValues Anda. Setelah itu merender ulang yaitu formulir karena formik prop berubah karena peristiwa yaitu pemilihan status nilai tombol radio radioGroup berubah, itu memaksa rendering ulang dan dengan demikian Anda melihat nilai yang benar dalam output di layar. Jika Anda memasukkan console.log di luarnya tepat di bawah tag formulir Anda, itu akan menunjukkan kepada Anda status yang diperbarui pada saat rendering ulang

Berikut cuplikan yang diperbarui untuk mencerminkan apa yang terjadi pada dan setelah acara klik

https://codesandbox.io/s/formik-radio-and-checkbox-inputs-mgps7

Itu juga menunjukkan info tentang penggunaan yang paling sering saya gunakan di basis kode saya untuk berbagai skenario.

1
Rikin 20 Agustus 2019, 17:46