react使用antd定制个性化form组件

react使用antd定制个性化form组件

antd组件库已经非常的丰富了，对于大多数需求来说都可以满足，but，总有一些需求是那么的“奇葩”，现有组件无法实现，只能极不情愿地造一个出来了。

原系统界面是这样的：

根据新需求最终实现出来的效果是这样的：

新组件具备的功能：

• 输入的值可以被getFieldDecorator()捕获
• 输入的内容可以在任意位置加入数据列
• 点选新增数据列时组件获取焦点

---

先贴上代码：

import React from 'react';
import { Form, Row, Col, Select, Input } from 'antd';
import styles from '../../style.css';

const FormItem = Form.Item;
const Option = Select.Option;
const cursorPosition = (element) => { //获取光标位置
  let CaretPos = 0;
  if (document.selection) {
  //支持IE
      element.focus();
      const Sel =