正文
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/
