react中复制和删除控件

最新推荐文章于 2024-06-07 12:04:02 发布

置顶

zfan520

最新推荐文章于 2024-06-07 12:04:02 发布

阅读量2.4k

点赞数

分类专栏： Reactjs 数组文章标签： react控件复制数组操作控件

本文链接：https://blog.csdn.net/zfan520/article/details/79202905

版权

本文介绍了如何在React应用中利用数组来管理控件，通过添加和删除数组元素实现控件的增减。核心在于通过操作数组实现控件的动态显示，并优化了捕获新增控件输入值的方法，以方便后续处理。

摘要由CSDN通过智能技术生成

为了实现检索中，输入框的复制效果，思前想后，想到了一种用数组存放控件，对控件的复制和删除便可通过操作数组来实现了。

1、通过+和-控制控件的添加和删除

1.1 演示效果

1.2 核心代码

下面的代码可以实现上面所展示的效果，但是有一个缺陷，就是添加的控件输入的值，不好区分，每一次添加的控件输入的值无法捕获，更别谈通过输入的值进行后续操作了。

import React, { Component } from 'react';
import { Row, Col, Input, Button, Form } from 'antd';
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const { TextArea } = Input;

export default class Cor extends Component {

  constructor(props) {
    super(props)
    this.state = {
      //初始化数组长度
      arrSize: 1,
      keyWord: [],
      name: [],
      description: []
    }
    //初始化数组
    this.arr = [this.generateROW()]
  }
  //定义需要复制的控件，并合理布局
  generateROW() {
    return (
      <Row >
        <FormItem
          label="知识点关键字"
          labelCol=