React中的不定复选框

Question

我想制作一个非常灵活的复选框，它可以这样工作： https://css-tricks.com/indeterminate-checkboxes/ ： 我希望我的复选框有三个选项：未选中、已选中和不确定。不确定：如果与此不确定复选框连接的所有复选框都被选中，则此不确定复选框将被选中。 我的复选框看起来像这样：

import classNames from 'classnames';
import React from 'react';

interface IProps {
  name?: string;
  className?: string;
  style?: React.CSSProperties;
  label?: string;
  color?: 'primary' | 'success' | 'secondary' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
  value?: string;
  disabled?: boolean;
  checked?: boolean;
  onChange?: () => void;
  indeterminate?: boolean;
}


type DefaultProps = Partial<IProps>;

const defaultProps: DefaultProps = {
  color: 'primary',
  disabled: false,
};

const Checkbox: React.FC<IProps> = (props) => {

  const {label, color, disabled, name, value, indeterminate, onChange, checked, ...nextProps} = props;



  return (
    <div className="checkbox-content">
      <label className={classNames(
        {...nextProps},
        'checkbox',
        `checkbox-${color}`,
        disabled && 'checkbox-disabled',
        indeterminate && `checkbox-${color}-indeterminate`
      )}
      >
        <input
          type="checkbox"
          name={name && name}
          value={value && value}
          checked={checked}
          onChange={onChange}
        />
        <span>{label}</span>
      </label>
    </div>
  );
};

Checkbox.defaultProps = defaultProps;
Checkbox.displayName = 'CheckBox';

export default Checkbox;

function Application () {

  const [isChecked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked(!isChecked);
  };


  return (
    <div>
      <Checkbox label="initial" onChange={handleChange} checked={isChecked} />
    </div>
  );
}

I dont have any idea, how to do it properly because I want to my component be fully reusable.

- Fydor

---

name && name еТМ value && value зЪДжДПдєЙжШѓдїАдєИпЉЯ - zenly

为我的输入提供唯一值 - Fydor

但为什么不只是 name 呢？ - Felix

Answer 1

正如您所引用的文章所述，您需要通过JavaScript设置indeterminate。因此，需要创建一个useEffect处理程序来负责此操作。

 // snippet

 const {indeterminate} = props;
 const cRef = useRef();

  useEffect(() => {
    cRef.current.indeterminate = indeterminate;
  }, [cRef, indeterminate]);

cRef 给我们一个对 input 元素的引用，以便我们可以设置 required 属性。因此，useEffect 需要两个依赖项：元素的 cRef 和从父级获取的属性 indeterminate。

完整的工作代码可能如下所示。

import { useEffect, useRef, useState } from "react";
import "./styles.css";
import classNames from "classnames";

const Checkbox = ({
  indeterminate = false,
  label,
  color,
  disabled,
  name,
  value,
  onChange,
  checked,
  ...props
}) => {
  const cRef = useRef();

  useEffect(() => {
    cRef.current.indeterminate = indeterminate;
  }, [cRef, indeterminate]);

  return (
    <div className="checkbox-content">
      <label
        className={classNames(
          { ...props },
          "checkbox",
          `checkbox-${color}`,
          disabled && "checkbox-disabled",
          indeterminate && `checkbox-${color}-indeterminate`
        )}
      >
        <input
          type="checkbox"
          name={name}
          value={value}
          checked={checked}
          onChange={onChange}
          ref={cRef}
        />
        <span>{label}</span>
      </label>
    </div>
  );
};

export default function App() {
  const [isChecked, setChecked] = useState(false);

  const handleChange = () => {
    setChecked(!isChecked);
  };

  return (
    <div>
      <Checkbox
        label="initial"
        onChange={handleChange}
        checked={isChecked}
        indeterminate
      />
    </div>
  );
}

- Felix