Typescript react-select 自定义输入组件 InputProps 类型不兼容

Question

我无法输入 React-Select 的输入组件的 inputProps。我检查了 Input.d.ts，但似乎 InputProps 接口与其他组件（如 ControlProps 或 OptionProps）不同。

我应该如何实现它才能访问 CustomInput 组件中的当前 input value 和 options？

const CustomInput = (inputProps: any) => {
    ...
    return (
      <>
        <components.Input {...inputProps} />
        ...
      </>
    );
  };

<RcSelect
   components={{
     ...
     Input: CustomInput,
   }}
   ...
/>

为我的目的使用任何作品，但我需要输入它来消除 lint 警告。

Answer 1

您应该通过导入类型 InputProps 将 inputProps 类型从 any 更改为 InputProps，为了获得选项和价值必须破坏你的对象 inputProps.

CustomInput.ts

import Select, {InputProps,OptionType,OptionsType,} from 'react-select';

const CustomInput = (inputProps: InputProps) => {
  const getValue: () => OptionsType<OptionType> = inputProps.getValue;
  const options: OptionsType = inputProps.options;
        
  console.log('value', getValue()); // <==== value
  console.log(options); // <==== options
        
  return <input {...inputProps} />; //
};

您可以查看此演示：https://stackblitz.com/edit/react-starter-typescript-jtpxxf?file=index.tsx

Typescript react-select 自定义输入组件 InputProps 类型不兼容

Typescript react-select Custom Input Component InputProps type is incompatible

typescript

reactjs

react-select