Question

这可能是非常具体且棘手的，但是在这里很难找到解决方案。

从本质上讲，我们（我正在进行的项目）在一些Form控件周围有包装器，以保留所有处理程序/设置样板，并且我在使用Select组件（将来自Select-Select库中的Select进行包装的组件）遇到麻烦。

react-use-form-state公开了“原始”类型，以与自定义控件一起使用，您可以使用公开的setField方法自己更新值。该库还允许自定义类型声明来定义表单状态：

const [ formState, { raw } ] = useFormState<FormSchema>()

要在定制组件中使用此原始类型，此类型后面的Input类型是通用类型，其中该类型是表单状态的类型。

但是，如果我删除了这种额外的抽象级别，并直接将其用于实例化状态的同一函数中，则可以正常工作：

我要问的是我应该如何在CustomSelect组件中正确键入此内容，以便正确满足打字稿。

Codesandbox of minimum code here

Answer 1

嘿，我认为我可以通过在选择的组件定义中扩展ValueType的使用来使您的类型定义正常工作。

这里是working fork of your codesandbox

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]}
    />
  );
}

Answer 2

最终通过简单地传递所需的值来解决此问题，而不是尝试将它们从依赖于类型的父对象中拉出来。

我仍然想知道是否有一种方法可以在从父级传递时正确地推断类型，但是想不出一种方法/甚至可能。

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

反应选择打字稿问题（反应使用形式状态）

2 个答案:

反应选择打字​​稿问题（反应使用形式状态）

2 个答案:

反应选择打字稿问题（反应使用形式状态）