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

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={{ span: 11, offset: 1 }}
          wrapperCol={{ span: 10 }}
        >
          <Input style={{ width: 100, height: 28 }} />
        </FormItem>
        <FormItem
          label="资源关键字"
          labelCol={{ span: 11, offset: 1 }}
          wrapperCol={{ span: 10 }}
        >
          <Input style={{ width: 100, height: 28 }} />
        </FormItem>
        <FormItem
          label="资源描述"
          labelCol={{ span: 7, offset: 1 }}
          wrapperCol={{ span: 15 }}
        >
          <TextArea style={{ width: 250, height: 28 }} />
        </FormItem>
      </Row >
    )
  }
  //单击+时实现复制控件操作
  handlePlus() {
    this.arr.push(this.generateROW())
    this.setState({ arrSize: this.state.arrSize + 1 })
  }
  //单击-时实现删除最下面的一行
  handleMinus() {
    this.arr.pop()
    this.setState({ arrSize: this.state.arrSize - 1 })
  }
  render() {
    return (
      <Form layout="inline">
        <Row key={this.state.arrSize}>
          <Col span={12}>
            {/* 通过map对数组进行呈现 */
              this.arr.map(v => v)
            }
          </Col>
          <Col>
            <Button icon="plus" size="small" type="primary" ghost onClick={this.handlePlus.bind(this)} />
            <Button icon="minus" size="small" type="primary" ghost onClick={this.handleMinus.bind(this)} />
          </Col>
        </Row>
      </Form>
    );
  }
}

2、正确捕获添加控件输入值

针对上面代码遇到的瓶颈，我这边对上面的代码进行了优化。效果和代码如下。

2.1 优化后的效果

2.2 修改后的核心代码

将通过map对数据解析的代码替换成如下代码。

……
{/* <Col span={12}>
            {// 通过map对数组进行呈现 
              this.arr.map(v => v)
            }*/}
          <Col span={12}>
            {
              this.arr.map((v, i) => {
                return (
                  <Row key={i}>
                    <FormItem
                      label="知识点关键字"
                      labelCol={{ span: 11, offset: 1 }}
                      wrapperCol={{ span: 10 }}>
                      <Input style={{ width: 100, height: 28 }} onChange={(e) => { this.state.keyWord[i] = e.target.value }} />
                    </FormItem>
                    <FormItem
                      label="资源关键字"
                      labelCol={{ span: 11, offset: 1 }}
                      wrapperCol={{ span: 10 }}
                    >
                      <Input style={{ width: 100, height: 28 }} onChange={(e) => { this.state.name[i] = e.target.value }} />
                    </FormItem>
                    <FormItem
                      label="资源描述"
                      labelCol={{ span: 7, offset: 1 }}
                      wrapperCol={{ span: 15 }}
                    >
                      <TextArea style={{ width: 150, height: 28 }} onChange={(e) => { this.state.description[i] = e.target.value }} autosize={{ minRows: 1, maxRows: 6 }} />
                    </FormItem>
                  </Row>
                )
              })
            }
          </Col>
……

export default class Cor extends Component {
……
handleClick() {//检索按钮的单击事件，可替换成你想要的事件，我这边只是将收集的值打印出来
    console.log("知识点关键字:", this.state.keyWord);
    console.log("资源关键字:", this.state.name);
    console.log("资源描述:", this.state.description);
  }
 render() {
    return (
      <Form layout="inline">
        <Row key={this.state.arrSize}>
         ……
        </Row>
        <Row>
          <Col span={13} style={{ textAlign: 'right' }}>
            <Button type="primary" onClick={this.handleClick.bind(this)}>检索</Button>
          </Col>
        </Row>
      </Form>
    );
  }
}

3、结束语

用数组装控件，用控制数组的方式来控制控件，这种方式会帮助我们快速通过外部控件来控制控件的添加和删除，方式还是挺新颖的，当然希望这篇博客能对你有所帮助。