带有复选框的 Nextjs 打字稿过滤表答案

【问题标题】：Nextjs typescript filtering table with checkboxes带有复选框的 Nextjs 打字稿过滤表
【发布时间】：2022-01-01 05:59:57
【问题描述】：

我最近开始使用 Typescript，但遇到了一个问题。在 javascript 中我解决了这个问题，但现在在 Typescript 中我在黑暗中资助。我从一个 api 和一个表中获取数据，在该表中我使用过滤方法填充表的数据。我需要帮助的是通过复选框修复排序和过滤。我已经嵌入了一个代码框的链接来重现我的问题。

https://codesandbox.io/s/vibrant-feistel-isspt?file=/pages/index.tsx

      const elavtal: { [key: string]: any } = [
        { productTypeLabel: "SPOT" },
        { productTypeLabel: "HOURLY SPOT" },
        { productTypeLabel: "FIXED" },
        { productTypeLabel: "BUY PRICE" }
      ];
        {elavtal.map((elavtal, i) => {
                                return (
                                  <input type="checkbox" key={i} defaultChecked={false} value={elavtal.productTypeLabel}
                                    onChange={(event) =>
                                      setProductType((prev) =>
                                        event.target.checked
                                          ? [...prev, elavtal.productTypeLabel]
                                          : []
                                      )
                                    }
                                  >{elavtal.productTypeLabel}</input>
                                )
                              })
                              }```

【问题讨论】：

标签： reactjs typescript sorting next.js filtering

【解决方案1】：

将您的界面“IElAvtal”定义为一个对象并使用对象数组“IElAvtal[]”

interface IElAvtal {
  productTypeLabel: string;
}

const elavtal: IElAvtal[] = [
  { productTypeLabel: "SPOT" },
  { productTypeLabel: "HOURLY SPOT" },
  { productTypeLabel: "FIXED" },
  { productTypeLabel: "BUY PRICE" }
];

elavtal.map((el, i) => {
  return (
     ...
  )
}

【讨论】：