react-cascader-checker
预览
check.gif
使用
npm包地址：https://www.npmjs.com/package/react-cascader-checker
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;
}
