React实现列表联动

目录结构

第一个文件是json数据

第二个文件是入口

第三个文件是实现主要功能

第四个文件是样式

InsertFunction.jsx

第一种方法是：集合联动

<div className={styles.tabsStyle}><div><Row><Col span={12}><p>函数类别：</p><p><List className={styles.listStyle}size="small"bordered="true"itemLayout="horizontal"dataSource={dataFunction}renderItem={item => (<List.Item className={styles.listItem}><List.Item.Meta onClick={()=>{this.setState({child : item.child,param : item.child[0].param,explain : item.child[0].explain,value:item.child[0].value,})}}title={item.name}/></List.Item>)}/></p></Col><Col span={12} ><p>选择函数：</p><p><List className={styles.listStyle}size="small"bordered="true"itemLayout="horizontal"dataSource={this.state.child}renderItem={item => (<List.Item className={styles.listItem}><List.Item.Meta onClick={()=>{this.setState({param : item.param,explain : item.explain,value:item.value,})}}title={item.value}/></List.Item>)}/></p></Col></Row></div><div> <p className={styles.listItemStyle}>{this.state.param}</p><p className={styles.listItemStyle}>{this.state.explain}</p></div></div>

第二种方式是：select联动

import React, {Component } from 'react';import {Col, Modal, Row } from 'antd';import styles from './InsertFunction.module.less';import dataFunction from './DataFunction';import FunctionParam from './FunctionParam';export default class InsertFunction extends Component {constructor(props) {super(props);this.state = {visibleFunctionParam:false,child: dataFunction[0].child,value: dataFunction[0].child[0].value,explain:dataFunction[0].child[0].explain,param:dataFunction[0].child[0].param}this.getType = this.getType.bind(this);this.getFunction = this.getFunction.bind(this);}functionParamCancel = () => {this.setState({visibleFunctionParam: false,});};functionParamClick = () => {this.setState({visibleFunctionParam: true,});};renderOptions1 = () => {return dataFunction.map(element =><option key={element.name} value={element.name}>{element.name}</option>);};renderOptions2 = () => {return this.state.child.map(element =><option key={element.value} value={element.value}>{element.value}</option>);};getType(e) {dataFunction.map(element => {if (element.name == e.target.value) {this.setState({child: element.child,value: element.child[0].value,explain: element.child[0].explain,param: element.child[0].param,})}});}getFunction(e){this.state.child.map(element => {if(element.value == e.target.value){this.setState({value:element.value,explain:element.explain,param:element.param,})}});}render() {const {visible,handleCancel } = this.props;return (<Modal visible={visible} title="插入函数" width={570}bodyStyle={{height: 380, paddingLeft: '20px'}} onOk={this.functionParamClick} onCancel={handleCancel} ><FunctionParam visibleFunctionParam={this.state.visibleFunctionParam} functionParamCancel={this.functionParamCancel}curFunction={this.state.value} curDescribe={this.state.explain}curParam={this.state.param} /><div className={styles.tabsStyle}><div><Row><Col span={12}><p>函数类别:</p><p><select className={styles.listStyle} size="5" onClick={this.getType}>{this.renderOptions1()}</select></p></Col><Col span={12} ><p>选择函数:</p><p><select className={styles.listStyle} size="9" onClick={this.getFunction}>{this.renderOptions2()}</select></p></Col></Row></div><div> <p className={styles.listItemStyle}>{this.state.param}</p><p className={styles.listItemStyle}>{this.state.explain}</p></div></div></Modal>);}}

DataFunction.js

let dataFunction = [{"name": "数据库","child": [{"value": "DAVERAGE","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数值的平均值。","param":"DAVERAGE(database,field,criteria)"},{"value": "DCOUNT","explain": "该函数计算数据库中包含数字的单元格的数量。","param":"DCOUNT(database,field,criteria)"},{"value": "DCOUNTA","explain": "该函数计算数据库中非空单元格的数量。","param":"DCOUNTA(database,field,criteria)"},{"value": "DGET","explain": "该函数从列表或数据库的列中提取符合指定条件的单个值。","param":"DGET(database,field,criteria)"},{"value": "DMAX","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的最大数字。","param":"DMAX(database,field,criteria)"},{"value": "DMIN","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的最小数字。","param":"DMIN(database,field,criteria)"},{"value": "DPRODUCT","explain": "该函数将数据库中符合条件的记录的特定字段中的值相乘。","param":"DPRODUCT(database,field,criteria)"},{"value": "DSTDEV","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为一个样本估算出的样本总体标准偏差。","param":"DSTDEV(database,field,criteria)"},{"value": "DSTDEVP","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为样本总体计算出的总体标准偏差。","param":"DSTDEVP(database,field,criteria)"},{"value": "DSUM","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字之和。","param":"DSUM(database,field,criteria)"},{"value": "DVAR","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为一个样本估算出的样本总体方差。","param":"DVAR(database,field,criteria)"},{"value": "DVARP","explain": "该函数返回列表或数据库中满足指定条件的记录字段（列）中的数字作为样本总体计算出的样本总体方差。","param":"DVARP(database,field,criteria)"}]}, {"name": "日期与时间","child": [{"value": "DATE","explain": "该函数返回DateTime对象，代表了一个独有的日期，通过定制年，月和日。","param":"DATE(year,month,day)"},{"value": "DATEDIF","explain": "该函数返回两个日期间的天，月和年的数目。","param":"DATEDIF(date1,date2,outputcode)"},{"value": "DATEVALUE","explain": "该函数将文本格式的日期转换为日期对象。","param":"DATEVALUE(date_string)"},{"value": "DAY","explain": "该函数将序列号转换为月份日期。","param":"DAY(date)"},{"value": "DAYS","explain": "此函数返回两个日期之间的天数。","param":"DAYS(startdate,enddate)"},{"value": "DAYS360","explain": "该函数以一年360天为基准计算两个日期间的天数。","param":"DAYS360(startdate,enddate,method)"},{"value": "EDATE","explain": "该函数返回用于表示开始日期之间或之后月数的日期的序列号。","param":"EDATE(startdate,months)"},{"value": "EOMONTH","explain": "该函数返回指定月数之前或之后的月份的最后一天的序列号。","param":"EOMONTH(startdate,months)"},{"value": "HOUR","explain": "返回时间值得小时数。","param":"HOUR(time)"},{"value": "ISOWEEKNUM","explain": "此函数返回给定日期在全年中的ISO周数。","param":"ISOWEEKNUM(date)"},{"value": "MINUTE","explain": "该函数返回时间值中的分钟，为一个介于0到59之间的整数。","param":"MINUTE(time)"},{"value": "MONTH","explain": "该函数返回以序列号表示的日期中的月份。","param":"MONTH(data)"},{"value": "NETWORKDAYS","explain": "此函数返回参数开始日期和结束日期之间完整的工作日数值。工作日不包括周末和专门指定的假期。","param":"NETWORKDAYS(startdate,enddate,holidays)"},{"value": "NETWORKDAYS.INTL","explain": "此函数返回两个日期之间的所有工作日数。","param":"NETWORKDAYS.INTL(startdate,enddate,weekend,holidays)"},{"value": "NOW","explain": "此函数返回当前的日期和时间。","param":"NOW()"},{"value": "SECOND","explain": "此函数返回时间值的秒数。返回的秒数为0到59之间的整数。","param":"SECOND(time)"},{"value": "TIME","explain": "此函数返回指定时间的时间间隔对象。","param":"TIME(hour,minutes,seconds)"},{"value": "TIMEVALUE","explain": "此函数返回由文本字符串所代表的时间的时间间隔对象值。","param":"TIMEVALUE(time_string)"},{"value": "TODAY","explain": "此函数返回当前的日期和时间。","param":"TODAY()"},{"value": "WEEKDAY","explain": "此函数返回某日期为星期几。默认情况下，其值为1（星期天）到7（星期六）之间的整数。","param":"WEEKDAY(date,type)"},{"value": "WEEKNUM","explain": "此函数返回一个数字，该数字代表一年中的第几周。","param":"WEEKNUM(date,weektype)"},{"value": "WORKDAY","explain": "此函数返回某日期（起始日期）之间或之后相隔指定工作日的某一日期的日期值。","param":"WORKDAY(startdate,enddate,holidays)"},{"value": "WORKDAY.INTL","explain": "此函数返回指定的若干个工作日之前或之后的日期的序列号（使用自定义周末参数）。周末参数指明周末有几天以及是哪几天。","param":"WORKDAY.INTL(startdate,numdays,weekend,holidays)"},{"value": "YEAR","explain": "此函数返回某日期对应的年份。","param":"YEAR(date)"},{"value": "YEARFRAC","explain": "此函数返回start和end之间的天数占全年天数的百分比。","param":"YEARFRAC(startdate,enddate,basis)"}]}]export default dataFunction;

InsertFunction.module.less

@fontSize: 14px;.tabsStyle {font-size: @fontSize;margin-top: -10px;}.listStyle {overflow: auto;height: 220px;margin-left: 10px;margin-right: 10px;}.listItem:active {background-color: #d9edf7;}.listItemStyle {height: 10px;margin-left: 10px;}

index.js

import InsertFunction from './InsertFunction';export default InsertFunction;

实现效果