美文网首页
React 动态增加,删除,上下移动dom

React 动态增加,删除,上下移动dom

作者: 前端混合开发 | 来源:发表于2019-05-29 12:02 被阅读0次

    思想

    react的世界里,都是状态变更(数据变更)来驱动dom变化,动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了,而是通过装载<li> 或者<td> 数据数组[]来动态添加dom,下面的例子实现使用了antd的组件库。
    最终我选择的是用添加/移除数组中的元素来实现的;

        addElement = () => {
            var arr = this.state.isShow;
            arr.push(true);
            this.setState({
                isShow: arr
            })
        }
    
        removeElement = (index) => {
            var arr = this.state.isShow;
            arr.splice(index, 1);
            this.setState({
                isShow: arr
            })
        }
    

    References:
    https://blog.csdn.net/liuyuqin1991/article/details/78844434
    https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item

    相关文章

      网友评论

          本文标题:React 动态增加,删除,上下移动dom

          本文链接:https://www.haomeiwen.com/subject/xiyetctx.html