Блог

Главная - Вопросы по программированию - 2345 ошибка в машинописном тексте в событии event.target.value в событии React

2345 ошибка в машинописном тексте в событии event.target.value в событии React

#reactjs #typescript #events #checkbox

Вопрос:

Я только начал стилизовать машинописный текст и, к сожалению, не смог найти решение своей проблемы. У меня есть список флажков. Я добавляю значение непроверенных флажков в массив. Но TS показывает ошибку в аргументе event.target.value типа «любой», который нельзя присвоить параметру типа «никогда».

Флажок

 <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);
    }

событие.цель.значение не определено красным цветом в обоих вариантах.

Комментарии:

1. Можете ли вы предоставить полные примеры кода, так как нелегко отлаживать то, что происходит в приведенном примере кода. Укажите родительский компонент и компоненты флажка.

2. const switchType = (event: React.ChangeEvent<HTMLInputElement>): void => {

Ответ №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

Метки: