next.js 如何指定onChange和select组件的类型

m0rkklqb  于 2023-03-29  发布在  其他
关注(0)|答案(2)|浏览(200)

我在当前项目中使用next.js、typescript和antd时遇到了一个问题。
虽然在antd select组件的onchage函数中指定了以下类型,但在value和onchage函数中会发生以下错误。
我一直想解决这个问题,但似乎找不到办法。

import React, { useState } from 'react';
import { Select } from 'antd';

const Home = () => {
  const [postCount, setPostCount] = useState<number>(10);

  const postCountOptions = [
    {
      value: 5,
      label: 'Count 5',
    },
    {
      value: 10,
      label: 'Count 10',
    },    
  ];

  const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
    setPostCount(value);
  }, []);

  return (
    <>  
     <Select
        defaultValue={10} 
        onChange={onChangeCount} 
        options={postCountOptions} 
      />
    </>
  );
};

export default Home;

这是发生的第一个错误。

const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
    setPostCount(value); // Error 1.
  }, []);

(parameter) value: React.ChangeEvent<HTMLSelectElement>
Argument of type 'ChangeEvent<HTMLSelectElement>' is not assignable to parameter of type 'SetStateAction<number>'.
  Type 'ChangeEvent<HTMLSelectElement>' is not assignable to type '(prevState: number) => number'.
    Type 'ChangeEvent<HTMLSelectElement>' provides no match for the signature '(prevState: number): number'.ts(2345)

这是发生的第二个错误。

<Select
        defaultValue={10} 
        onChange={onChangeCount} // Error 2.
        options={postCountOptions} 
      />

(JSX attribute) onChange?: ((value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void) | undefined
Type '(value: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'unknown' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.ts(2322)
Select.d.ts(99, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & SelectProps<unknown, BaseOptionType | DefaultOptionType> & { children?: ReactNode; } & { ...; } & { ...; }'
cgh8pdjw

cgh8pdjw1#

我想你在onChangeCount函数上得到了错误的类型。使用number而不是React.ChangeEvent<HTMLSelectElement>
所以,代码看起来像这样

const onChangeCount = useCallback((value: number ) => {
 setPostCount(value);
}, []);
t98cgbkg

t98cgbkg2#

你可以通过Select组件传递类型。你也不需要用useState显式定义类型number(除非你有不同的要求)。一旦你将初始值传递给useState,typescript将通过检查初始状态值自动推断正确的类型。

import { useCallback, useState } from 'react';
import { Select } from 'antd';
import { DefaultOptionType } from 'antd/es/select';

const Home = () => {
    const [postCount, setPostCount] = useState(10);

    const postCountOptions = [
        {
            value: 5,
            label: 'Count 5'
        },
        {
            value: 10,
            label: 'Count 10'
        }
    ];

    const onChangeCount = useCallback((value: number, option: DefaultOptionType | DefaultOptionType[]) => {
        setPostCount(value);
    }, []);

    return (
        <>
            <Select<number> defaultValue={10} onChange={onChangeCount} options={postCountOptions} />
        </>
    );
};

export default Home;

相关问题