技術標籤：antd 的form 表單怎麼回顯資料

• 被師傅分配一個任務，是修改原有的介面的一個元件，就是將自定義的input元件換成select元件，但是由於返回值不一樣，導致我需要對相應元件的返回值加一層封裝，不然就要改後臺的資料：
• 由於select元件的可選項是固定的，那麼這裡可以走一個捷徑，就是說可以利用setState來改變props傳過來的值。在這裡我陷入一個誤區，在一篇部落格中找到了答案：

由於不同元件的返回值格式不一樣，為了保證返回成功

1.在替換元件的時候就要把前面獲取到的資料進行一次修改，保持提交的資料格式跟之前的一模一樣。

2.修改後臺程式碼，這樣做的工作量可能比較大。

我採用的是第一種方法，為什麼是拿到整個的表單資料再進行格式統一化呢？原因在於，在react的表單中，每個組建的資料是通過一個onchange函式來儲存的，然後再通過this.form.getModel()方法獲取到所有表單控制元件的資料，加上元件是反覆利用的，一旦改變某個元件傳值的格式，系統別的部分也會受到影響。

這裡附上部分程式碼：

//獲取表單資料部分
getData = () => {
    const { configs } = this.props;
    let data = this.form ? this.form.getModel() : undefined;
    if (_.isEmpty(data)) {
      return data;
    }
    data = _.mapKeys(data, (value, key) => key.split('#').join('.'));
    data.configs = _.toPairs(data.configs).map((entry) => {
      const name = _.replace(entry[0], /(#)/g, '.');
      const configItem = _.find(configs, (item) => item.name === name);
      return {
        name: name,
        value: Utils.wrapValue(entry[1], configItem.type),
      };
    });
    data.components = _.toPairs(data.components).map((entry) => {
      ......
 
    });
    _.unset(data, 'zone');
    data.type = '***';
    if (!_.get(data, [******])) {
      data = _.merge(data, {'***'}}});
    }
    return data;
  };
 

對於某個元件：

changeValue = (event) => {
        this.props.setValue(event.target.value);
        if ( this.props.onChange )
        {
            this.props.onChange(event);
        }
    };
。。。。。。。。。。。省略無關程式碼
<Select
                    {...importedProps}
                    value={value}
                    onChange={this.changeValue}
                    input={this.input()}
                />
//資料主要是通過onchange函式來的