Retool应用多文本输入框数据导出与导入功能实现问询

一、批量导出TextInput值（保存功能） #

完全可行，无需依赖表格导出功能，直接通过Retool内置的JS能力批量收集组件值即可：

• 先给300个TextInput组件设置统一命名规则，比如config_input_001到config_input_300，方便批量遍历
• 在「保存」按钮的点击事件中编写以下代码：

  // 初始化存储对象
  const savedConfig = {};
  // 遍历所有组件，筛选出目标TextInput并收集值
  Object.keys(appsmith.components).forEach(compKey => {
    if (compKey.startsWith('config_input_')) {
      savedConfig[compKey] = appsmith.components[compKey].value;
    }
  });
  // 导出为JSON文件供用户下载保存
  utils.downloadFile(JSON.stringify(savedConfig), 'app_config.json', 'application/json');
  

• 若需要复用收集逻辑，可新建一个Transformer（命名如collectConfigData），将上述收集代码放入其中，按钮事件中直接调用collectConfigData.value再执行导出即可，代码更整洁易维护

二、批量回填TextInput值（继续编辑功能） #

同样可行，通过读取用户上传的JSON配置文件批量赋值：

• 添加一个文件上传组件（如configFileUploader），限制仅允许上传JSON格式文件
• 在「加载配置」按钮的点击事件中编写以下代码：

  // 解析上传的JSON文件内容
  const loadedConfig = await configFileUploader.parsedValue;
  if (!loadedConfig) return;
  // 遍历配置对象，给对应TextInput组件赋值
  Object.keys(loadedConfig).forEach(compKey => {
    if (appsmith.components[compKey]) {
      appsmith.components[compKey].setValue(loadedConfig[compKey]);
    }
  });
  

• 同样可以用Transformer封装解析和赋值逻辑，按钮事件触发Transformer执行即可

额外说明 #

• 自托管Retool完全支持上述JS操作，无权限限制
• 无需依赖特殊的「状态导出」功能，直接通过组件API和内置工具函数即可实现；Transformer仅用于封装可复用逻辑，提升代码可维护性
• 若组件命名无规律，可手动维护目标组件数组（如const targetInputs = [input1, input2, ..., input300]），遍历该数组完成收集和赋值操作

内容的提问来源于stack exchange，提问作者MASL