The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & ISelectInput'

I tried to pass an event to my onChange event. But I get intrinsic error all the time.

I made my selectInputInterface format this way:

interface ISelectInput {
  placeholder?: string;
  onChange: () => void;
  children: Record<string, any>[];
}

Then, my onChange function:

const handleSelectCategory = (event: any) => {
    const category = event.target.value;

    setSelectedCategory(category);
  };

I implemented in my UI:

<SelectInput
   placeholder="Select input"
   onChange={handleSelectCategory}
 >
    {uniqueCategories}
</SelectInput>

But I got this typescript error:

Type '(event: any) => void' is not assignable to type '() => void'.ts(2322)
SelectInput.tsx(29, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & ISelectInput'

</details>


# 答案1
**得分**: 0

因为函数签名不同，不接受任何参数。

你可以添加一个...args来实现这个：

```typescript
interface ISelectInput {
  placeholder?: string;
  onChange: (...args: any) => void;
  children: Record<string, any>[];
}

或者将你的事件(event)作为可选参数，这样做：

interface ISelectInput {
  placeholder?: string;
  onChange: (event?: any) => void;
  children: Record<string, any>[];
}

interface ISelectInput {
  placeholder?: string;
  onChange: (...args: any) => void;
  children: Record<string, any>[];
}

interface ISelectInput {
  placeholder?: string;
  onChange: (event?: any) => void;
  children: Record<string, any>[];
}

答案2

得分: 0

这个错误是因为IselectInput中的onChange是类型为() => void的，也就是说，它应该接收一个没有输入的函数。但是在这里，handleSelectCategory函数接收了一个(event)。

对于这个错误，你需要将handleSelectCategory函数从event: string改为event: any，因为在代码的最后，我想要将从SelectInput中选择的值(event.target.value)传递给setSelectedCategory作为选定的类别。

interface ISelectInput {
  placeholder?: string;
  onChange: (category: string) => void;
  children: Record<string, any>[];
}

const handleSelectCategory = (event: any) => {
  const category = event.target.value;
  setSelectedCategory(category);
};

<SelectInput
  placeholder="Select input"
  onChange={handleSelectCategory}
>
  {uniqueCategories}
</SelectInput>

请注意，这只是将类型从string更改为any的示例。你可能需要根据你的代码结构和需求进一步修改。

interface ISelectInput {
  placeholder?: string;
  onChange: (category: string) => void;
  children: Record<string, any>[];
}

const handleSelectCategory = (event: any) => {
  const category = event.target.value;
  setSelectedCategory(category);
};

<SelectInput
  placeholder="Select input"
  onChange={handleSelectCategory}
>
  {uniqueCategories}
</SelectInput>

答案3

得分: 0

函数相对于它们的参数是逆变的。这也包括参数个数。换句话说，你可以将 () => void 赋值给 (event: any) => void，但反过来不行。这是因为如果我将 (event: any) => void 赋给期望 () => void 的地方，该函数将被无参数调用，因此不安全。

不过，这很容易修复。只需将 onChange 定义为带有参数的：

interface ISelectInput {
    placeholder?: string;
    onChange: (event: any) => void;
    children: Record<string, any>[];
}

我还建议您不要使用 any，而是使用适当的类型，也许是 InputEvent。

Playground（演示使用带有守卫子句的 InputEvent）

interface ISelectInput {
    placeholder?: string;
    onChange: (event: any) => void;
    children: Record<string, any>[];
}