反应清单与跨度答案

【问题标题】：React check list with spans反应清单与跨度
【发布时间】：2023-02-16 22:27:31
【问题描述】：

我想要一个清单，允许我检查和取消选中多个项目。我有构成我的列表的程式化跨度（带有样式组件）：

<Styled.OptionsContainer>
   {checkList.map((item, index) => (
     <Styled.FormOption key={index} onClick={handleCheck}>{item}</Styled.FormOption>
   ))}
</Styled.OptionsContainer>

在我处理任何被点击的项目的函数中，我想要这样的东西：

function handleCheck(event: React.MouseEvent<HTMLElement>) {
    var updatedList = [...checked];
    if (updatedList.indexOf(event.target) > -1) {
      updatedList = [...checked, event.target];
    } else {
      updatedList.splice(checked.indexOf(event.target), 1);
    }
    setChecked(updatedList);
  }

我正在使用 Typescript，但出现以下错误：

“EventTarget”类型的参数不可分配给类型的参数 '绝不'。

你对如何解决这个问题有什么建议吗？

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

看起来事件类型不正确。除了使用 React.MouseEvent），您可以尝试更新为：

React.ChangeEvent<HTMLInputElement>

【讨论】：