react-cascader-checker

react-cascader-transfer

预览效果

使用

npm i react-cascader-checker

import React, { useState, useRef } from "react";

import ReactCascaderChecker from "react-cascader-checker";
import "react-cascader-checker/test.css";
import { optionsClass, optionsAlways } from "react-cascader-checker/src/config/option";

interface PropsType {}
export const CascadeRreact: React.FC<PropsType> = (props) => {
  const [textAlways, settextAlways] = useState<string>("按常用件选择");

  // 选择常用件后的回调
  const onChangealways = (value: any[]) => {
    console.log(value);
    if (value.length > 0) {
      settextAlways(value.map((el) => el.title).join(","));
    }
  };

  // 选择品类后的回调
  const onChangeclass = (value: any[]) => {
    console.log(value);
  };

  return (
    <div>
      <div className="Cascadera">
        <ReactCascaderChecker
          data={optionsAlways}
          placeholder={textAlways}
          onChange={(res) => onChangealways(res)}
        ></ReactCascaderChecker>
      </div>

      <div className="Cascadera">
        <ReactCascaderChecker
          data={optionsClass}
          placeholder="按品类选择"
          onChange={(res) => onChangeclass(res)}
        ></ReactCascaderChecker>
      </div>
    </div>
  );
};

clone 到本地运行

npm install
npm start

API

见 interface.ts

export interface defaultData {
  title: string;
  id?: string;
  children:
    | {
        title: string;
        id?: string;
        children: never[];
        value: string;
      }[]
    | [];
  value: string;
}

export interface PropsType {
  data: any;
  placeholder?: string;
  onChange: (res: defaultData[]) => void;
}