Saya memiliki fungsi onchange yang didefinisikan seperti di bawah ini menggunakan TypeScript dan bereaksi.

<Form>
    {({ field, form }: FieldProps) => (
        <Switch
          {...field}
          disabled={somecondition}
          checked={field.value === something}
          onChange={() => {
            if (field.value === somevalue) {
              form.setFieldValue(SOURCE, manual);
            } else {
              form.setFieldValue(SOURCE, automation);
            }
          }}
        />
      )}
    </Form>

Ini bekerja. tetapi seperti yang Anda lihat dari kode di atas, metode onchange hanya didefinisikan di sana. Saya ingin menulis definisi fungsi ke fungsi lain dan memanggilnya di onChange.

Saya sudah mencoba sesuatu seperti di bawah ini,

 const handleChange = (field, form) => { //throws error: field has implicit type any and form has 
 //implicit type any
     if (field.value === somevalue) {
         form.setFieldValue(SOURCE, manual);
     } else {
         form.setFieldValue(SOURCE, automation);
     }
 }; 
 <Form>
    {({ field, form }: FieldProps) => (
        <Switch
          {...field}
          disabled={somecondition}
          checked={field.value === something}
          onChange={handleChange(field, form)} //error: type void is not assignable to type 
          //((event:changeEvent<HTMLInputElement>) => void
        />
      )}
    </Form>

Saya melihat beberapa kesalahan seperti yang disebutkan di atas dalam cuplikan kode. dapatkah seseorang membantu saya memperbaiki ini. Terima kasih.

-1
stackuser 14 Januari 2021, 16:36

3 jawaban

Jawaban Terbaik

Kesalahan di mana field dan form keduanya memiliki tipe implisit any muncul karena Anda belum menentukan tipe parameter untuk fungsi yang baru dibuat. Untuk mengatasi kesalahan, Anda harus memberikan jenis ke handleChange(). Salah satu pendekatan adalah dengan menggunakan jenis pencarian untuk menentukan jenis parameter:

type HandleChange = (field: FieldProps['field'], form: FieldProps['form']) => void

const handleChange: HandleChange = (field, form) => {
  if (field.value === somevalue) {
    form.setFieldValue(SOURCE, manual)
  } else {
    form.setFieldValue(SOURCE, automation)
  }
}

Kesalahan yang menyatakan bahwa type void is not assignable to type (event:changeEvent<HTMLInputElement>) => void muncul karena Anda segera menjalankan handleChange():

<Switch
  {...field}
  disabled={somecondition}
  checked={field.value === something}
  onChange={handleChange(field, form)} // <-- handleChange() is invoked here
/>

Seperti yang dinyatakan @JoshMerrian, pendekatan untuk menyelesaikan kesalahan ini adalah dengan membuat fungsi yang memanggil handleChange():

<Switch
  {...field}
  disabled={somecondition}
  checked={field.value === something}
  onChange={() => handleChange(field, form)}
/>
0
khan 14 Januari 2021, 14:07

Arahkan kursor ke prop onChange. Anda akan melihat ini. Jenis

Alih-alih onChange={handleChange(field, form)}, seharusnya onChange={() => handleChange(field, form)} Karena yang dicari prop onChange adalah fungsi, bukan pemanggilan fungsi.

1
Josh Merrian 14 Januari 2021, 13:41