React实现列表联动

程序员文章站 2022-07-02 23:43:02

...

目录结构
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;

实现效果
React实现列表联动

React实现列表联动

ListView实现聊天列表之处理不同数据项

Android开发实现Launcher3应用列表修改透明背景的方法

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）

微信小程序列表的上拉加载和下拉刷新的实现

vue实现城市列表选择功能

Python之列表实现栈的工作功能

原生js实现新闻列表展开/收起全文功能

迅捷路由器自反访问控制列表实现方法

react组件从搭建脚手架到在npm发布的步骤实现

React利用插件和不用插件实现双向绑定的方法详解

React实现列表联动

ListView实现聊天列表之处理不同数据项

Android开发实现Launcher3应用列表修改透明背景的方法

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）

微信小程序 列表的上拉加载和下拉刷新的实现

vue实现城市列表选择功能

Python之列表实现栈的工作功能

原生js实现新闻列表展开/收起全文功能

迅捷路由器自反访问控制列表实现方法

react组件从搭建脚手架到在npm发布的步骤实现

React利用插件和不用插件实现双向绑定的方法详解

微信小程序列表的上拉加载和下拉刷新的实现