React.js 根据JSON形成级联选择器
时间:2019-06-18
本文章向大家介绍React.js 根据JSON形成级联选择器,主要包括React.js 根据JSON形成级联选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
export default class FinancialItemSelect extends React.Component { constructor(props, context){ super(props, context); this.state={ value: props.initialValue ? props.initialValue : "0-无" } } updateValue = (e) => { console.log(this.state.value); let val = e.target.value, path = e.target.dataset.path; this.props.update(`${path}-${val}`); this.setState({ value: `${path}-${val}` }) } renderSelect(pastPath, [curr, ...restPath], optionTree){ // if reached the end (leaf) of the tree, return nothing. if(optionTree === undefined || Object.keys(optionTree).length === 0){ return []; } // otherwise, list all options on this level let options = []; for(let key in optionTree){ options.push(<option key={key} value={key}>{key}</option>); } // for the case there is possibly leaves, but not yet selected. let currPath = pastPath.concat(curr); if(restPath.length === 0){ return [<div key={curr}><Select data-path={currPath.join('-')} onChange={(e) => this.updateValue(e)} onClick={(e)=> { e.preventDefault(); e.stopPropagation(); }} >{options}</Select></div>]; } else { let [selected, ...rest] = restPath; return [<div key={curr}><Select data-path={currPath.join('-')} value={selected} onChange={(e) => this.updateValue(e)} onClick={(e)=> { e.preventDefault(); e.stopPropagation(); }} >{options}</Select></div>, ...this.renderSelect(currPath, restPath, optionTree[selected])] } } render(){ return this.renderSelect([], this.state.value.split('-'), BalanceSheetCategory) } }
原文地址:https://www.cnblogs.com/marvintau/p/11043698.html
- Travis CI 使用详解
- git svn 命令详解
- Docker Swarm mode 详解
- Docker 私有仓库安装配置 (Registry v2)
- CoreOS 安装服务本地服务器 Docker 化
- 硬盘安装 CoreOS 三节点集群
- 从javascript脚本混淆说起
- CoreOS etcd3 集群实践
- Spring MVC学习教程之流程表单提交,3步实现这个功能
- PXE 模式启动 CoreOS
- iPXE 模式启动 CoreOS(简单、推荐使用)
- CoreOS 已废弃组件
- Docker Compose version 3 使用详解
- Virtualbox 安装 Alpine Linux
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法