Reactjs 无法设置复选框的选中状态

我创建了一个自定义的react组件。当复选框在用户操作中更改时，我能够获取其状态。但是，当我调用组件并将选中状态设置为道具时，我无法设置选中状态。这是我的密码

    import React, { FunctionComponent, SyntheticEvent, useState } from 'react';
import nanoid from 'nanoid';

import classNames from 'classnames';
import { mapToCssModules } from 'utils';
import VolumeComponentProps from 'utils/props';

export interface CheckboxProps extends VolumeComponentProps {
  /** Is selected */
  checked?: boolean;

  /** disabled - Sets or Gets the property if the input is disabled or not */
  disabled?: boolean;

  /** on Change event, raised when the input is clicked */
  onInputChange?: (e: SyntheticEvent, updatedState: boolean) => void;
}

export const Checkbox: FunctionComponent<CheckboxProps> = ({
  checked = false,
  children,
  className,
  cssModule,
  disabled = false,
  onInputChange,
  ...attributes
}: CheckboxProps) => {
  const valueCheck = checked ? true : false;
  const [inputId] = useState(`checkbox_${nanoid()}`);
  const [isChecked, setIsChecked] = useState(valueCheck);

  const containerClasses = mapToCssModules(classNames(className, 'vol-checkbox'), cssModule);
  const checkboxInputClass = mapToCssModules(classNames('vol-checkbox__input'), cssModule);
  const checkboxClass = mapToCssModules(classNames('vol-checkbox__input-control'), cssModule);

  const onChangeHandler = (e: SyntheticEvent) => {
    setIsChecked((e.currentTarget as HTMLInputElement).checked);
    if (onInputChange) {
      onInputChange(e, isChecked);
    }
  };

  return (
    <>
      {isChecked && <span>true</span>}
      <label className={containerClasses} htmlFor={inputId}>
        <input
          {...attributes}
          id={inputId}
          className={checkboxInputClass}
          disabled={disabled}
          checked={isChecked}
          type="checkbox"
          onChange={onChangeHandler}
        />
        <span className={checkboxClass} />
      </label>
    </>
  );
};

export default Checkbox;

import React，{FunctionComponent，SyntheticEvent，useState}从'React'导入；
从“nanoid”导入nanoid；
从“类名称”导入类名称；
从“utils”导入{mapToCssModules}；
从“utils/props”导入VolumeComponentProps；
导出接口CheckboxProps扩展VolumeComponentProps{
/**被选中*/
选中？：布尔值；
/**disabled-设置或获取输入是否已禁用的属性*/
禁用？：布尔值；
/**在更改事件上，单击输入时引发*/
onInputChange？：（e:SyntheticEvent，updatedState:boolean）=>void；
}
导出常量复选框：FunctionComponent=({
选中=错误，
儿童
类名，
cssModule，
禁用=错误，
输入改变，
…属性
}：CheckboxProps）=>{
const valueCheck=已检查？真：假；
const[inputId]=useState（`checkbox_${nanoid（）}`）；
const[isChecked，setIsChecked]=使用状态（valueCheck）；
const containerClasses=mapToCssModules（类名（类名，'vol checkbox'），cssModule）；
const checkboxInputClass=mapToCssModules（类名（'vol-checkboxInput'），cssModule）；
const checkboxClass=mapToCssModules（类名（'vol-checkbox\uu input-control'），cssModule）；
const onChangeHandler=（e:SyntheticEvent）=>{
setIsChecked（（e.currentTarget作为HTMLInputElement）.checked）；
if（onInputChange）{
输入更改（e，已检查）；
}
};
返回(
{isChecked&&true}
);
};
导出默认复选框；

所以，如果我调用复选框作为

<Checkbox onChange=()=>{} checked />

{}已检查/>

选中的值未设置为复选框，当我手动单击它时，它会起作用

更新

这个问题只发生在故事书中。当我创建一个选中的旋钮以改变状态时，该功能不起作用。这是我的故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import Checkbox from './Checkbox';

storiesOf('Pure|Checkbox ', module).add(' Checkbox', () => {
  return (
    <Checkbox
      disabled={boolean('Disabled', false)}
      checked={boolean('Checked', false)}
      onInputChange={action('onChangeHandler')}
    />
  );
});

从“React”导入React；
从'@storybook/react'导入{storiesOf}；
从“@storybook/addon knobs”导入{boolean}；
从“@storybook/addon actions”导入{action}；
从“./Checkbox”导入复选框；
storiesOf（'Pure | Checkbox'，模块）。添加（'Checkbox'，（）=>{
返回(
);
});

您的代码应该可以工作，但在触发

onChange

事件时，只需切换

isChecked

状态即可简化代码

onChange

表示值已更改，由于选中的输入只有两个可能的变量，我们可以安全地假设值会切换，因此无需每次都从事件对象获取值

像这样：

  const onChangeHandler = () => {
    setIsChecked(!isChecked);
    if (onInputChange) {
      onInputChange(e, !isChecked); // also, this line should pass the updated value
    }
  };

---

谢谢是的，你是对的。当我单独调用组件时，它工作了。我忘了提到，我在Storybook中为这个组件创建了一个故事，并正在测试它。不知何故，当我从故事书中创建旋钮以改变状态时，它不起作用。