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

你在打电话

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

在作为父组件的 App 组件中。在这里，您的已选中和 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} />
      );
    }

Answer 2

我不明白您是否将这段代码作为不工作的示例编写。如果这是最终代码，则必须像那样破坏道具才能使用。

          <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