Question

我试图创建一个自定义复选框，以便可以添加自己的样式和所有样式。

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。由于输入不在DOM中，因此返回undefined。那么在这种情况下我们该怎么办？”

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

如何在React挂钩中创建自定义复选框

1 个答案: