CheckBox onClick 在反应类型脚本中不起作用

Question

我设计了一个组件 MyCheckBox（我将它用作辅助组件），所以我将其导入到另一个组件中，但是每当我尝试触发该事件时，它都没有触发。

参考代码

我的复选框


    interface MyCheckBoxProps
    {
     onClick?:MouseEventHandler<HTMLInputElement>;
     checked?:boolean
    }
    
    export const MyCheckBox (props:MyCheckBoxProps): JSX.Element =>{
    return(
              <input
                  type="checkbox"
                  id={id}
                  onClick={onClick}
                  checked={checked}
                />
          )  
    }

当我导入它时


const[check,setCheck] = useState(false)

  const handleCheckChange = (e: any, key: string) => {
    console.log("check", e)  // => this console log does not show up
    if (key === "newPostActivity") {
      console.log("check", e)
    setCheck(e.target.checked)
    }
  }
  <MyCheckBox checked={check} onClick={(e)=>handleCheckChange(e,"some string")}/>

每当我点击 MyCheckBox 时，事件 ( handleCheckChange ) 都不会被触发

有人帮忙吗？

Answer 1

我不明白你写这段代码是不是作为一个不工作的例子。如果这是最终代码，您必须销毁道具才能像那样使用。

          <input
              type="checkbox"
              id={id}
              onClick={onClick}
              checked={checked}
            />

否则，您应该调用：

          <input
              type="checkbox"
              id={props.id}
              onClick={props.onClick}
              checked={props.checked}
            />

我重写了你的代码：

应用程序

export default function App() {
  const [check, setCheck] = useState(false);
  const handleCheckChange = (e: MouseEvent<HTMLInputElement>, key: string) => {
    console.log("check", e);
    setCheck(!check);
    console.log("I am state", check);
  };
  return (
    <div>
      <MyCheckBox
        id="foo"
        checked={check}
        onClick={(e) => handleCheckChange(e, "some string")}
      />
    </div>
  );
}

我的复选框

interface MyCheckBoxProps {
  id: string;
  onClick?: MouseEventHandler<HTMLInputElement>;
  checked?: boolean;
}
const MyCheckBox: React.FC<MyCheckBoxProps> = (props) => {
  const { id, onClick, checked } = props;
  return <input type="checkbox" id={id} onClick={onClick} checked={checked} />;
};

export default MyCheckBox;

从我的 codesandbox

复制

Answer 2

您正在打电话

<MyComponent checked={check}
        onClick={(e) => handleCheckChange(e, "some string")}/>

在您的 App 组件中，它是父组件。这里你的 checked 和 onclick 是道具。所以现在访问

   import React from "react";
    export default function MyCheckBox(props) {
      return (
        <input type="checkbox" onClick={props.onClick} checked={props.checked} />
      );
    }

或

像

一样破坏你的道具

   import React from "react";
    export default function MyCheckBox({onClick, checked}) {
      return (
        <input type="checkbox" onClick={onClick} checked={checked} />
      );
    }

CheckBox onClick 在反应类型脚本中不起作用

CheckBox onClick is not working in react type-script

checkbox

typescript

reactjs

react-typescript