Question

简单地考虑一个可以被视为复选框的切换组件，以及一个处理切换的表单组件。

export const ToggleSwitch2 = ({ id, checked, onChange }:
  { id:string, checked:boolean, onChange: any }) => { //any type here

  return(
    <div>
      <input
        type="checkbox"
        className="toggle-switch-checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)} //Problem here
      />
    </div>
  );
}

export const Form2 = () => {
  const [checked, setChecked] = useState(false);

  return(
    <ToggleSwitch2 id="toggleSwitch" checked={checked} onChange={setChecked} />
  );
};

我为 onChage 函数尝试的类型：

1.- onChange: (e:React.ChangeEvent<HTMLInputElement>)=>void

2.- onChange: (e:React.FormEvent<HTMLInputElement>)=>void

3.- onChange: (e:BaseSyntheticEvent)=>void

4.- onChange: (e:SyntheticEvent)=>void

我找不到合适的，因为钩子返回的是 React.Dispatch<React.SetStateAction<boolean>> 类型，而切换中的输入 onChange 类型是 React.InputHTMLAttributes<HTMLInputElement>.onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined。

onChange 组件中的 ToggleSwitch2 参数函数的类型是什么？

Answer 1

您的错误是您试图输入 onChange 属性，因为它是复选框的事件处理程序，但事实并非如此。您正在传递 (checked: boolean) => void，并在实际事件处理程序中调用它。如果你想传递实际的事件处理程序，函数应该是这样的：(event) => setChecked(event.target.checked) 并且整个代码应该是这样的：

import { ChangeEventHandler, useState } from "react";
interface ToggleSwitchProps {
  id: string;
  checked: boolean;
  onChange: ChangeEventHandler<HTMLInputElement>;
}
export const ToggleSwitch2 = ({ id, checked, onChange }: ToggleSwitchProps) => {
  return (
    <div>
      <input
        type="checkbox"
        className="toggle-switch-checkbox"
        checked={checked}
        onChange={onChange}
      />
    </div>
  );
};

export default () => {
  const [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch2
      id="toggleSwitch"
      checked={checked}
      onChange={(event) => setChecked(event.target.checked)}
    />
  );
};

键入以使用 useState 钩子访问 e.target.value

1 个答案: