edu-react-my-class-selector

钉钉教育「选班级」React 组件

安装

yarn add edu-react-my-class-selector
# or
npm i --save edu-react-my-class-selector

API

import { useState } from 'react';

import {
  MyClassDrawer,
  IMyClassDrawerProps,
  IClass,
} from 'edu-react-my-class-selector';


export default function ClassSelector() {
  const [
    visible,
    toggleVisible
  ] = useState(false);

  const props: IMyClassDrawerProps = {
    visible,
    onClose: () => toggleVisible(false),

    onOk: (classes: IClass[]) => console.log(classes),

    defaultValue: [
      {
        classId: 1111,
        className: '一年级二班',
      }
    ],

    classes: [
      {
        classId: 1111,
        className: '一年级二班',
        count: 11
      },
      {
        classId: 1112,
        className: '一年级二班',
        count: 0
      },
    ]
  };

  return (
    <div>
      <h2>选我的班级</h2>

      <button
        onClick={() => toggleVisible(true)}
      >选班级</button>

      <MyClassDrawer
        {...props}
      />
    </div>
  );
}

IClass

| 属性 | 说明 | 类型 | 默认值 | |-----------|------------|--------|--------| | classId | 班级 id | number | - | | className | 班级名(部门) | string | - | | count? | 班级学生数 | number | - |

IMyClassDrawerProps

| 属性 | 说明 | 类型 | 默认值 | |-----------------|-------------------------------------|------------------------------|--------| | visible | 通 antd drawer 的 visible 属性 | boolean | - | | destroyOnClose? | 通 antd drawer 的 destroyOnClose 属性 | boolean | - | | defaultValue? | 默认选中班级 | IClass[] | - | | value? | 选中班级，受控属性 | IClass[] | - | | classes | 可选班级列表 | IClass[] | - | | onClose? | 关闭回调 | Function | - | | onOk? | 确定回调 | (classes: IClass[]) => void; | - |

教育开放数据源

• http 文档
  • http://api.alibaba-inc.com/api/rest/preview?spm=a1z6v.8204065.c3.300.ac8UTG&apiId=214342&lmkey=apiMenu-apiList
  • 需要讲接口的 response 转换为 IClass[] 类型传递给 MyClassDrawer 组件