如何在反应钩子中创建自定义复选框答案

【问题标题】：How to create custom checkbox in react hooks如何在反应钩子中创建自定义复选框
【发布时间】：2019-12-18 02:42:12
【问题描述】：

我正在尝试创建一个自定义复选框，因此我可以添加自己的样式和所有样式。

import React, { useState } from "react";
import "./checkbox.module.css";
}
export default props => {
  const [isChecked, setIsChecked] = useState(false);

  const toggleCheck = () => {
    setIsChecked(!isChecked);
  };

  return (
    <>
      <span onClick={() => toggleCheck()}>
        <input type="checkbox" checked={isChecked} {...props} />
        <span />
      </span>
    </>
  );
};

在我的主文件中，我正在调用这组函数。

 const handleModifierChange = event => {
    console.log("inside change", event);
    const selectedID = event.target.value;

  };

<Checkbox
  name={modifier.name}
  value={modifier.id}
  onChange={handleModifierChange}
/>

所以我希望能够将我的 onChange 道具传递给实际的输入字段，但在复选框发生更改时在实际的 handleModifierChange 中得到通知。

我试图关注这个 stackoverflow 帖子，Styling a checkbox in a ReactJS environment

对于答案，有人问了一个我想弄清楚的类似问题。 “然而，令人惊讶的是，我在监听 onChange 事件时无法获取 e.target.name 或 e.target.id。它返回 undefined 因为输入不在 DOM 中。那么在这种情况下我们该怎么办？” .

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

因此，您可能会因为在状态更改后重新渲染组件而遇到问题。您可以尝试摆脱处理跨度的onClick，但只需在复选框更改处理程序中调用onClick 回调：

export default ({ onChange, ...checkboxProps }) => {
  const [isChecked, setIsChecked] = useState(false);

  const changeHandler = () => {
    setIsChecked(!isChecked);

    onChange && onChange(event);
  };

  return (
    <>
      <span>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={changeHandler}
          {...checkboxProps}
        />
        <span />
      </span>
    </>
  );
};

您甚至可以传递复选框值而不是事件实例：

  onChange && onChange(isChecked && props.value);

【讨论】：