[React Ocean 组件库] 实现 CheckBox 多选题

交互展示

使用

import { CheckBoxGroup } from 'Ocean';
import React from 'react';


const options = [
  { label: 'A', value: 'a' },
  { label: 'B', value: 'b' },
  { label: 'C', value: 'c' },
  { label: 'D', value: 'd' },
  { label: 'E', value: 'e' },
];

const Demo1 = () => {
  const onChange = (...arg: any[]) => {
    console.log('checked--', arg);
  };

  return (
    <>
      <CheckBoxGroup
        option={options}
        onChange={onChange}
        defaultSelect={['a', 'e']}
        style={{ marginRight: '20px' }}
      />
    </>
  );
};

export default Demo1;

需求

• 支持不同方向，不同大小，不同类型的多选按钮。
• 实心样式多选题按钮。
• 非考试模式。

实现

思路：CheckBox 主要是复用了 Radio 组件。

const CheckBoxGroup = (props: CheckBoxGroup) => {
  const { option } = props;
  const newOption = Array.isArray(option) ? option : [option];
  const [select, setCurSelect] = useImmer<any[]>(props.defaultSelect || []);

  const onChange = (e: any, k: any, cur: any | any[]) => {
    setCurSelect((draft) => {
      const index = draft.findIndex((k) => k === e);
      if (index === -1) {
        draft.push(e);
      } else {
        draft.splice(index, 1);
      }
    });

    props.onChange(e, k, cur);
  };

  return (
    <div>
      {newOption.map((o) => {
        return (
          <RadioGroup
            key={o.value}
            onChange={(k, e, cur) => onChange(k, e, cur)}
            value={select}
            type={props.type}
            size={props.size}
            mode={props.mode}
            style={props.style}
          >
            <Radio value={o.value}>{o.label || o.value}</Radio>
          </RadioGroup>
        );
      })}
    </div>
  );
};
};