antd 的form 表单怎么回显数据_react的form表单：关于获取表单数据

最新推荐文章于 2024-08-02 16:58:54 发布

weixin_39726379

最新推荐文章于 2024-08-02 16:58:54 发布

阅读量2.2k

点赞数

文章标签： antd 的form 表单怎么回显数据

本文链接：https://blog.csdn.net/weixin_39726379/article/details/112102639

版权

在React项目中，使用antd的Form组件时，遇到表单数据回显问题。由于更换组件导致返回值格式变化，需要对数据进行封装以保持与原有格式一致。本文探讨了两种解决方案：修改后端数据格式或前端统一格式化，并选择了前者。通过在onChange事件中保存数据并用form.getModel()获取完整表单数据，确保组件间数据格式统一，避免影响其他系统部分。示例代码展示了实现过程。

摘要由CSDN通过智能技术生成

被师傅分配一个任务，是修改原有的界面的一个组件，就是将自定义的input组件换成select组件，但是由于返回值不一样，导致我需要对相应组件的返回值加一层封装，不然就要改后台的数据：
由于select组件的可选项是固定的，那么这里可以走一个捷径，就是说可以利用setState来改变props传过来的值。在这里我陷入一个误区，在一篇博客中找到了答案：

react中的setState的使用和深入理解 - Katydids - 博客园www.cnblogs.com

由于不同组件的返回值格式不一样，为了保证返回成功

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函数来的