2345 Typescript 在 event.target.value 在 React 事件中的错误答案

【问题标题】：2345 mistake in Typescript at event.target.value In React event2345 Typescript 在 event.target.value 在 React 事件中的错误
【发布时间】：2021-10-11 05:12:24
【问题描述】：

我刚开始设计 TypeScript，不幸的是我找不到我的问题的解决方案。我有一个复选框列表。我将未选中复选框的值添加到数组中。但是 TS 在 event.target.value 上显示错误 “any”类型的参数不能分配给“never”类型的参数。

复选框

<Checkbox
              className={classes.checkbox}
              icon={item.icon}
              onClick={props.switchType}
              checkedIcon={item.icon}
              name="checkedH"
              value={item.title}
              color="primary"
            />

还有事件

const switchType = (event: React.ChangeEvent<HTMLInputElement>) => {
   
    const currentIndex = checked.indexOf(event.target.value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(event.target.value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

event.target.value 在两种变体中均未用红色标出。

【问题讨论】：

您能否提供完整的代码示例，因为在提供的示例代码中调试发生的事情并不容易。提供父组件和复选框组件。
const switchType = (event: React.ChangeEvent<HTMLInputElement>): void => {

标签： reactjs typescript events checkbox

【解决方案1】：

由于您提供的代码还不够，这里有一个类型安全的示例，我认为这就是您想要完成的。

我已经修改了一些关于添加/删除项目的代码，因为提供的代码不完整，无法实现示例功能，我还删除了示例中的一些不必要的道具，使其更易于理解。

import * as React from "react";

const Checkbox: React.FC<{
  value: string;
  isChecked: (value: string) => boolean;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}> = ({ value, isChecked, onChange }) => {
  const checked = isChecked(value);

  return (
    <div>
      <label htmlFor={value}>{value}</label>
      <input
        id={value}
        type="checkbox"
        value={value}
        onChange={onChange}
        checked={checked}
      />
    </div>
  );
};

function TodoList() {
  const [selected, setSelected] = React.useState<string[]>([]);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    const isAlreadySelected = selected.includes(value);

    setSelected((prevState) =>
      isAlreadySelected
        ? prevState.filter((p) => p !== value)
        : [...prevState, value]
    );
  };

  const isChecked = (value: string) => {
    return selected.includes(value);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <Checkbox value="Get Milk" onChange={onChange} isChecked={isChecked} />
      <Checkbox value="Get Bread" onChange={onChange} isChecked={isChecked} />
      <pre>{JSON.stringify(selected)}</pre>
    </div>
  );
}

export default TodoList;

由于 StackOverflow 不支持 TypeScript，您可以在此处查看可运行示例：https://codesandbox.io/s/focused-dewdney-9mm7b

【讨论】：