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

Question

我刚开始设计 TypeScript，不幸的是我找不到问题的解决方案。我有一个复选框列表。我将未选中复选框的值添加到数组中。但是 TS 在 event.target.value Argument of type 'any' is not assignable to parameter of type 'never'.[=25= 上显示错误]

复选框

<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 在两种变体中都没有用红色划线。

Answer 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;

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

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

2345 mistake in Typescript at event.target.value In React event

checkbox

events

typescript

reactjs