Ant Design的Form組件中FormItem名稱相同引發的問題

一、問題描述

    在使用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>內容都能正常渲染表單一、表單2，爲何onChange始終輸出1呢？正常應該輸出 index:0 和 index:1 。

 

二、問題分析：

同名的表單被當成徹底相同的表單項處理，數值和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.  表單行爲再也不混淆。

 

三、拓展反思：

以上討論的FormItem名稱相同問題看似是個小問題，實際上不少狀況若是不注意FormItem的名稱惟一性，會形成不少問題，好比同名Item的值相互影響，以及以上所說的onChange行爲異常（容易出錯）。若是出現map渲染出多個表單時，能夠利用名稱+索引值使表單項名稱惟一。

若有問題歡迎留言討論。

原創博客禁止抄襲，轉載請註明出處：原文地址:https://www.cnblogs.com/xiao-pengyou/