[英]react-select typescript issue (react-use-form-state)
这可能非常具体和棘手,但很难在这里找到解决方案。
本质上,我们(我所在的项目)在我们的一些 Form 控件周围有包装器以保留所有处理程序/设置样板,并且我在包装来自 react-select 库的 Select 的 Select 组件方面遇到了问题。
react-use-form-state公开“原始”类型以与自定义控件一起使用,您可以在其中使用公开的 setField 方法自行更新值。 该库还允许自定义类型声明来定义表单状态:
const [ formState, { raw } ] = useFormState<FormSchema>()
要在自定义组件中使用此原始类型,其背后的输入类型是通用的,其中类型是表单状态的类型。
但是,如果我删除这个额外的抽象级别并直接在使用它工作正常的类型实例化状态的同一个函数中使用它:
我要问的是我想我如何在 CustomSelect 组件中正确键入它以正确满足打字稿。
嘿,我想我设法通过在您的选择组件定义中扩展 ValueType 的使用来使您的类型定义工作。
import * as React from "react";
import Select, { ValueType } from "react-select";
interface Props<ValueType> {
controls: Inputs<ValueType>;
name: keyof ValueType;
options: SelectOption[];
label?: string;
formState: FormState<ValueType, StateErrors<ValueType, string>>;
};
export function CustomSelect<ValueType extends {} = string>(
props: Props<ValueType>
) {
const { controls, options, formState, name } = props;
const handleChange = (option: any) => {
formState.setField(name, option);
};
return (
<Select
{...controls.raw({ name })}
options={options}
onChange={handleChange}
value={formState.values[name]}
/>
);
}
最终通过简单地传递所需的值来解决这个问题,而不是试图将它们从依赖于类型的父对象中拉出来。
我仍然想知道是否有办法在从父项传递时正确推断类型,但想不出办法/是否可能。
// Custom Select: type Props<T> = { controls: Inputs<T>; name: keyof T; options: SelectOption[]; value: ValueType<SelectOption>; *** setField: (name: keyof T, value: ValueType<SelectOption>) => void; *** }; const handleChange = (option: ValueType<SelectOption>) => { setField(name, option); }; return ( <Select {...controls.raw({ name })} options={options} onChange={handleChange} value={value} /> ); // Usage: <CustomSelect controls={inputs} name="dropdown" options={options} value={formState.values.dropdown} setField={formState.setField} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.