Appsmith输入框编辑值回滚问题：寻求无干扰编辑替代方案

核心问题分析 #

你之前用全局storeValue传递默认值，会触发全局重渲染导致输入框内容回滚；onTextChanged同步store又会因为频繁重渲染导致响应迟缓，移动端onSubmit兼容性差。解决思路是用页面临时状态替代全局store，缩小状态影响范围，避免不必要的重渲染。

具体实现步骤 #

1. 创建页面临时状态
   在页面左侧「状态」面板新增一个临时状态，命名为tempPriceData，类型选择「对象」，初始值设为{}。

2. 修改JS对象的弹窗打开逻辑
   更新priceCalculation对象里的openModal方法，用临时状态存当前编辑的商品数据，替代storeValue：

   export default {
     openModal(priceType, price) {
       // 存入临时状态
       tempPriceData.setValue({ 
         priceType: priceType, 
         originalPrice: price 
       });
       // 打开弹窗
       PriceEditModal.open();
     }
   }
   

3. 绑定输入框默认值
   弹窗里的价格输入框，将默认值绑定为{{tempPriceData.value.originalPrice}}，而非全局store的值。

4. 提交逻辑优化
   弹窗的提交按钮点击事件直接读取输入框的当前值，调用REST API更新，无需依赖onSubmit：

   // 调用更新价格的API
   UpdateProductPriceAPI.run({
     priceType: tempPriceData.value.priceType,
     newPrice: PriceInput.text
   }, () => {
     // 更新成功后刷新表格数据
     ProductListAPI.run();
     // 关闭弹窗并清空临时状态
     PriceEditModal.close();
     tempPriceData.setValue({});
   });
   

方案优势 #

• 临时状态仅作用于当前页面，修改不会触发全局重渲染，彻底解决输入框内容回滚问题；
• 无需实时同步状态，编辑过程无延迟干扰；
• 用按钮点击提交替代onSubmit，完美适配移动端操作。

内容的提问来源于stack exchange，提问作者Ac. Selvan