Javascript 在React中选中开关/复选框时，如何执行通过道具传递的函数？

我正在创建一个

customSwitch

，它在内部控制自己的状态。我需要添加一个接受函数的

prop

，当开关被“选中”时，该函数应该运行。虽然我不知道怎么做

// @flow
import * as React from "react";
import { default as RSwitch } from "react-switch";

export type Props = {
  activeColor?: string,
  checked?: boolean,
  className?: string,
  id?: string | number,
  height?: number,
  label?: string,
  width?: number,
  /**Custom function. */
  onCheck: function,
};

export const CustomSwitch = (props: Props) => {
  const {
    onCheck,
    activeColor,
    checked,
    className,
    id,
    height,
    label,
    width,
  } = props;

  const [check, setCheck] = React.useState(checked);

  const handleChange = () => {
      setCheck(!check);
  };

  return (
    <React.Fragment>
      {label && (
        <label className="switch-label" htmlFor={id}>
          {label}
        </label>
      )}
        <RSwitch
          checked={check}
          checkedIcon={false}
          className={className}
          id={id}
          height={height}
          offColor="#e4e4e4"
          activeBoxShadow="0px 0px 1px 4px rgba(0, 0, 0, 0.1)"
          onChange={handleChange}
          onColor={activeColor}
          uncheckedIcon={false}
          width={width}
        />
    </React.Fragment>
  );
};

CustomSwitch.defaultProps = {
  activeColor: "#fd8f67",
  checked: false,
  className: undefined,
  id: undefined,
  height: 20,
  label: undefined,
  width: 38,
  onCheck: () => {}
};

export default CustomSwitch;

/@flow
从“React”导入*作为React；
从“react switch”导入{default as RSwitch}；
导出类型道具={
activeColor？：字符串，
选中？：布尔，
类名？：字符串，
id？：字符串|编号，
高度：数字，
标签？：字符串，
宽度？：数字，
/**自定义函数*/
onCheck：函数，
};
导出常量自定义开关=（道具：道具）=>{
常数{
一旦检查，
activeColor，
选中的，
类名，
身份证件
高度，
标签，
宽度，
}=道具；
const[check，setCheck]=React.useState（已检查）；
常量handleChange=（）=>{
setCheck（！check）；
};
返回(
{标签&&(
{label}
)}
);
};
CustomSwitch.defaultProps={
activeColor:#fd8f67“，
勾选：假，
类名：未定义，
id：未定义，
身高：20，
标签：未定义，
宽度：38，
onCheck:（）=>{}
};
导出默认自定义开关；

由于您已经对

handleChange

函数中的选中状态做出反应，因此通知父组件的最简单方法是在

setCheck

旁边调用

onCheck

但是，只有当检查状态更改为true时，才会执行此操作，如果组件安装时带有prop

checked===true，则不会执行此操作：

const handleChange = () => {
    const newCheck = !check;
    setCheck(newCheck);
    if (newCheck) onCheck(); // Will only execute if new check value is true.
}

另一个解决方案是使用
useffect
。这将确保无论何时执行
check===true
，即使在装载时也执行
onCheck
：

React.useEffect(() => {
    if (check) onCheck(); // Will execute whenever check is true.
}, [check]);

由于您已经对
handleChange
函数中的选中状态做出反应，因此通知父组件的最简单方法是在
setCheck
旁边调用
onCheck

但是，只有当检查状态更改为true时，才会执行此操作，如果组件安装时带有prop
checked===true，则不会执行此操作：

const handleChange = () => {
    const newCheck = !check;
    setCheck(newCheck);
    if (newCheck) onCheck(); // Will only execute if new check value is true.
}

另一个解决方案是使用
useffect
。这将确保无论何时执行
check===true
，即使在装载时也执行
onCheck
：

React.useEffect(() => {
    if (check) onCheck(); // Will execute whenever check is true.
}, [check]);

useffect（（）=>yourfunction（），[check]）
类似的东西？
useffect（（）=>yourfunction（），[check]）
类似的东西？