Ant Design的Form组件中FormItem名称相同引起的问题

1、问题描述

在使用Antd组件Form表单的过程中，会出现FormItem同名的情况，此时要特别注意同名引起的表单行为异常问题，主要表现在以下方面：

（1）同名表单项的值共享，并且其中一个的值改变，另外的同名表单的值也一致改变。

（2）同名表单中，表单控件比如<Input />的onChange等事件会出现行为异常的情况。

源码如下图所示：

import React, { PureComponent } from 'react';
import { Form, Input } from 'antd';
import styles from './styles.less';

@Form.create()
class Example extends PureComponent {
  render() {
    return (
      <div className={styles.example}>
        {
          data.map((item, index) => (
            <Form key={index}>
              <h2>表单{index + 1}</h2>
              <div>
                <Form.Item label="名称">
                  {this.props.form.getFieldDecorator('name')(
                    <Input />
                  )}
                </Form.Item>
              </div>
              <div>
                <Form.Item label="数值">
                  {this.props.form.getFieldDecorator('value')(
                    <Input onChange={() => { console.log('index:', index); }} />
                  )}
                </Form.Item>
              </div>
            </Form>
          ))
        }
      </div>
    );
  }
}

const data = [{
  name: '名称1',
  value: 1,
}, {
  name: '名称2',
  value: 2,
}];

export default Example;

渲染界面如下图：

此时如果通过在表单1和表单2中输入数值触发两者的onChange事件，会发现控制台输出都是  index:1；

连表单项的<h2>表单{index + 1}</h2>内容都能正常渲染表单1、表单2，为什么onChange始终输出1呢？正常应该输出 index:0 和 index:1 。

2、问题分析：

同名的表单被当成完全相同的表单项处理，数值和onChange行为都一样，所以两个表单项的onChange始终只执行了最后一个表单项的onChange事件，index始终输出1.

要想得到正确的结果，应该分别分别修改两个表单中的域名，可以在现有字段名的基础上加上index，即改为如下内容：

             <div>
                <Form.Item label="名称">
                  {this.props.form.getFieldDecorator('name' + index)(
                    <Input />
                  )}
                </Form.Item>
              </div>
              <div>
                <Form.Item label="数值">
                  {this.props.form.getFieldDecorator('value' + index)(
                    <Input onChange={() => { console.log('index:', index); }} />
                  )}
                </Form.Item>
              </div>

此时渲染的表单1和表单2的数值项的字段名分别是vlaue0和value1，就不会相互影响，经测试能正常输出index：0和index：1.  表单行为不再混淆。

3、拓展反思：

以上讨论的FormItem名称相同问题看似是个小问题，实际上很多情况如果不注意FormItem的名称唯一性，会造成很多问题，比如同名Item的值相互影响，以及以上所说的onChange行为异常（容易出错）。如果出现map渲染出多个表单时，可以利用名称+索引值使表单项名称唯一。

如有问题欢迎留言讨论。

原创博客禁止抄袭，转载请注明出处：原文地址:https://www.cnblogs.com/xiao-pengyou/