Reactjs 如何使用typescript和react编写es6 onchange方法？

我使用typescript和react定义了一个onchange函数，如下所示

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

这很有效。但正如您从上面的代码中看到的，onchange方法仅在这里定义。我想将函数定义写入另一个函数，并在onChange上调用它

我试过下面的方法

 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>

---

我在代码片段中看到了上面提到的一些错误。有人能帮我修一下吗。谢谢。

它应该是onChange={=>handleChangefield，form}，而不是onChange={=>handleChangefield，form}，因为onChange属性所寻找的是函数而不是函数调用。

将鼠标悬停在onChange属性上。 你会看到这个。

然后查看以下内容：后面的its类型。复制该字段并将其作为onChange方法的类型。

由于您尚未为新创建的函数定义参数类型，因此会引发字段和表单都具有隐式类型any的错误。要解决此错误，您需要提供handleChange的类型。一种方法是用于定义参数的类型：

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)
  }
}

声明类型void不可分配给类型event:changeEvent=>void的错误被抛出，因为您正在立即调用handleChange:

---

将鼠标悬停在组件的onChange上。您将看到其类型，然后查看末尾，然后复制以下所有行：。

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

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