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 组件