Question

我具有包裹Material UI选择的以下组件：

  return (
    <Box display="flex" justifyContent={justifyContent}>
      <SortWrapper>
        <InputLabel htmlFor={id} shrink={true} >
          Sort by
        </InputLabel>
        <Select
          data-bdd={id}
          id={id}
          defaultValue={defaultSortOrder}
          onChange={handleChangeSort}
        >
          {options.map((f: any) => (
            <MenuItem key={f.sortableKey} value={f.sortableKey}>
              {f.displayName}
            </MenuItem>
          ))}
        </Select>
      </SortWrapper>
    </Box>
  )

然后我会在用户界面内这样使用它：

...
              <SelectInput
                defaultSortOrder={defaultSortOrder}
                handleChangeSortOrder={handleChangeSortOrder}
                style={selectInputStyle}
                id="repairs-search-sort"
                options={sortableFields}
              />
...

和sortableFields就像这样：

sortableFields: SortableField[]

键和值太紧，无法SortableField[]

export default class SortableField {
  public displayName: string = ''
  public sortableKey: string = ''
}

是否可以使key和value的值更通用？

像<MenuItem key={ket} value={value}>一样，无论我们在用户界面中使用哪种类型？

Answer 1

您可以使用几种技术，在各种第三方库中都可以看到这些技术：

定义labelKey和valueKey道具。这样您就可以定义要搜索的属性。

interface MyInterface1 {
  id: string;
  name: string;
}

interface MyInterface2 {
  key: {
    id: string,
    description: string
  };
}

<SelectInput<MyInterface1> labelKey="id" valueKey="name"/>

<SelectInput<MyInterface2> labelKey="key.id" valueKey="key.description"/>

公开一个回调以返回标签和值。有时您需要获取options数组之外的数据，或执行某种格式设置（日期，时间，复合标签）。

interface MyInterface1 {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
}

function buildLabel(option: MyInterface1): string {
  return `${option.firstName} ${option.lastName}`;
}

<SelectInput<MyInterface1> labelCallback="buildLabel" valueKey="id"/>

用打字稿反应选择键的通用类型

1 个答案: