Question

我用以下选项元素创建了一个通用的react组件：从“ react”导入*作为React；

  export interface Option {
    value: string;
    label: string;
    disabled?: boolean;
  }

  export interface SelectProps<CustomOption extends Option> {
    options: CustomOption[];
    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
    selectedValue: string;
  }

  export const Select: React.FunctionComponent<SelectProps<Option>> = (props): JSX.Element => {
    const options = props.options.map(o => {
      return (
        <option key={o.value} value={o.value} disabled={o.disabled}>
          {o.label}
        </option>
      );
    });

    return (
      <select onChange={props.onChange} value={props.selectedValue}>
        {options}
      </select>
    );
  };

我这样使用：

  type OptionValues = "FOO" | "BAR" | "BAZ" | "NO_ANSWER";

  const createSelect = (selectedOption: OptionValues, onChange: (v: OptionValues) => void): JSX.Element => {
    const changeHandler = (event: React.ChangeEvent<HTMLSelectElement>): void => onChange(event.currentTarget.value as OptionValues);
    interface SelectOptions extends Option {
      value: OptionValues;
    }

    const selectProps: SelectProps<SelectOptions> = {
      onChange: changeHandler,
      selectedValue: selectedOption,
      options: [
        {
          value: "FOO",
          label: "foo"
        },
        {
          value: "BAR",
          label: "bar"
        },
        {
          value: "BAZ",
          label: "baz"
        },
        {
          value: "NO_ANSWER",
          label: " -- ",
          disabled: true
        }
      ]
    };
    return <Select {...selectProps} />;
  };

有什么方法可以避免在changeHandler中使用类型断言。 event.currentTarget.value as OptionValues。我也看到整个createSelect突然变得很冗长，到处都有对OptionValues的引用，但是我想没有办法解决。也欢迎解决问题的其他方法。那就是确保值是预定类型。

在TypeScript中将onChange值设为通用类型而无需类型声明

0 个答案: