Question

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

    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;

因此，如果我以

的方式调用我的复选框

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

选中的值未设置为复选框，当我手动单击它时可以使用。

更新

此问题仅在Storybook中发生。当我创建一个“已选中”旋钮以更改状态时，该功能无法正常工作。这是我的故事。

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')}
    />
  );
});

Answer 1

您的代码应该可以工作，但是您可以通过触发isChecked事件时切换onChange状态来简化代码。 onChange表示值已更改，并且由于选中的输入只有两个可能的变量，因此我们可以安全地假定该值是可切换的，因此无需每次都从事件对象获取该值。

赞：

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

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

1 个答案: