React 动态增加,删除,上下移动dom <li><td>

思想

在react的世界里,都是状态变更(数据变更)来驱动dom变化,动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了,而是通过装载<li> 或者<td> 数据数组[]来动态添加dom,下面的例子实现使用了antd的组件库
参考:https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item

实例

这里写图片描述

实现

1.引用

import React, { Component, PropTypes } from 'react';
import { Form, Input, Radio, Row, Col, Upload, Icon, Button, message, Select, DatePicker,Modal} from 'antd';

2.初始化

constructor(props) {
      super(props);
       this.state = {
           hover: [],
       };
}

3.内容组件
内容组件其实是一个<ul><li> ,遍历了一个<li>的数组articleContent,CSS样式见最后

render(){

const liClass = this.state.hover[index] ? "rectanglesON " : "rectanglesOFF ";
const formItems = this.state.articleData.articleContent.map((k, index) => {
return (
<li key={index} ref={"li_" + index} datatype={k.contentType} className={liClass} onMouseEnter={this.handleMouseEnter.bind(this,index)} onMouseLeave{this.handleMouseLeave.bind(this,index)} 
onClick={this.handleClickByModule.bind(this,index,k.contentType)}>
    //业务需要显示的东西
    <div>li标签里要显示的东西</div>
    //悬停时右下角的按钮
    <div className={this.state.hover[index]?'actionShow':'actionHide'}>
        <div className={(index > 0)?'domShow':'domHide'}>
            <Button type="primary" size="small" className="mr-5" onClick={this.handleClickBySortUp.bind(this,index)}><Icon type="caret-up" />上移</Button>
        </div>
        <div className={(index < this.state.articleData.articleContent.length - 1)?'domShow':'domHide'}>
            <Button type="primary" size="small" className="mr-5" onClick={this.handleClickBySortDown.bind(this,index)}><Icon type="caret-down" />下移</Button>
        </div>
        <div>
            <Button type="primary" size="small" className="mr-5" onClick={this.handleClickByDelete.bind(this,index)}><Icon type="delete" />删除</Button>
        </div>
    </div>
</li>
)
});

//ul
return (
    <FormItem label="内容">
        <ul className='listContent'>
            {formItems}
        </ul>
    </FormItem>
    )
}

4.事件

//鼠标移到内容模块上时触发的事件
    handleMouseEnter(key) {
        let arg = this.state.hover;
        arg[key] = true;
        this.setState({
            hover: arg
        });
    }

    //鼠标离开内容模块时触发的事件
    handleMouseLeave(key) {
        let arg = this.state.hover;
        arg[key] = false;
        this.setState({
            hover: arg
        });
    }
    //点击向上排序按钮事件
    handleClickBySortUp(index, e) {
        e.stopPropagation();
        let arr = this.state.articleData.articleContent;
        if (index != 0) {
            let temp = arr[index - 1];
            arr[index - 1] = arr[index];
            arr[index] = temp;
            this.setState({
                articleData: this.state.articleData,
            });
        }
    }

    //点击向下排序按钮事件
    handleClickBySortDown(index, e) {
        e.stopPropagation();
        let arr = this.state.articleData.articleContent;
        if (index != arr.length) {
            let temp = arr[index + 1];
            arr[index + 1] = arr[index];
            arr[index] = temp;
            this.setState({
                articleData: this.state.articleData,
            });
        }
    }

    //点击删除按钮事件
    handleClickByDelete(index, e) {
        e.stopPropagation();
        let arr = this.state.articleData.articleContent;
        arr.splice(index, 1);
        this.setState({
            articleData: this.state.articleData,
        });
    }

5.CSS样式

.rectanglesON {
    word-wrap: break-word;
    min-height: 200px;
    border: 1px dashed #808080;
    list-style-type: none;
    margin-bottom: 10px;
    cursor: pointer;
}

.rectanglesOFF {
    word-wrap: break-word;
    min-height: 200px;
    border: 1px dashed #d3d3d3;
    list-style-type: none;
    margin-bottom: 10px;
}

.listContent li {
    position: relative;
    .actionShow {
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 10px;
        display: flex;
    }
    .actionHide {
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 10px;
        display: none;
    }
}

.mr-5{
    margin-right:5px;
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <title>书虫补给站</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/_all-skins.min.css"> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script src="${pageContext.request.contextPath}/js/app.js"></script> <script type="text/javascript"> function SetIFrameHeight() { var iframeid = document.getElementById("iframe"); //iframe id if (document.getElementById) { iframeid.height = document.documentElement.clientHeight; } } </script> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="${pageContext.request.contextPath}/admin/index.jsp" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>智阅云联</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>书虫补给站</b></span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a > <img src="${pageContext.request.contextPath}/img/user1.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${USER_SESSION.name}</span> </a> </li> <li class="dropdown user user-menu"> <a href="${pageContext.request.contextPath}/userServlet?method=logout"> <span class="hidden-xs">注销用户</span> </a> </li> </ul> </div> </nav> </nav> </header> <!-- 页面头部 /--> <!-- 导航侧栏 --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li id="admin-index"> <a href="${pageContext.request.contextPath}/admin/index.jsp"> <i class="fa fa-dashboard"></i> <span><b>新书推荐</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=search" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>图书借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=searchBorrowed" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>当前借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/recordServlet?method=searchRecords" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>借阅记录</b></span> </a> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="${pageContext.request.contextPath}/bookServlet?method=selectNewbooks"></iframe> </div> </div> </body> </html>帮我优化一下这段代码
06-19
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值