Redux框架中Dimension字段单位重复追加问题的分析与修复

问题背景

在Redux框架4.4.14版本中，Dimension字段类型存在一个影响用户体验的bug。当用户多次选择单位时，系统会重复将单位值追加到维度值后面，导致数据异常。

问题现象

具体表现为：用户在Dimension字段中设置数值并选择单位后，如果再次更改单位选择，新的单位会被追加到已有值的末尾，而不是替换原有的单位。例如：

1. 用户输入"10"并选择"px"单位 → 存储值为"10px"
2. 用户再次选择"em"单位 → 存储值变为"10pxem"（错误）
3. 期望结果应为"10em"（正确）

技术分析

问题的根源在于字段的JavaScript处理逻辑。原始代码在单位变更时，直接将新单位追加到现有值的末尾，而没有先检查并移除可能已存在的旧单位。

原始代码的关键部分：

el.find( '.redux-dimensions-input' ).on(
    'change',
    function() {
        // 获取单位
        var units = $( this ).parents( '.redux-field:first' ).find( '.field-units' ).val();
        
        // 直接将新单位追加到值后面
        el.find( '#' + $( this ).attr( 'rel' ) ).val( $( this ).val() + units );
    }
);

解决方案

修复方案需要改进单位处理逻辑，在追加新单位前，先移除所有可能的旧单位。改进后的代码：

el.find( '.redux-dimensions-input' ).on(
    'change',
    function() {
        var dimension_unit = $( this ).parents( '.redux-field:first' ).find( '.field-units' ).val(),
            dimention_value = $( this ).val(),
            dimention_unit_el = $( this ).parents( '.redux-field:first' ).find( '.redux-dimensions-units' ),
            dimention_units = dimention_unit_el.children('option').map(function(i, e){
                return e.value || e.innerText;
            }).get();

        // 移除所有已存在的单位
        dimention_units.forEach(function(unit) {
            var regex = new RegExp(unit, 'g');
            dimention_value = dimention_value.replace(regex, '');
        });
        
        // 追加新单位
        el.find( '#' + $( this ).attr( 'rel' ) ).val( dimention_value + dimension_unit );
    }
);

实现原理

1. 获取所有可用单位：通过遍历单位选择器的option元素，收集所有可能的单位值
2. 清理旧单位：使用正则表达式移除值中所有已存在的单位
3. 追加新单位：将用户新选择的单位追加到清理后的值后面

版本更新

Redux团队已在最新的beta版本中修复了此问题。开发者可以：

1. 等待官方发布到WordPress插件库的正式更新
2. 或直接从GitHub仓库获取最新的beta版本使用

总结

这个修复展示了前端表单处理中一个常见但重要的问题：当用户交互可能多次触发相同操作时，必须确保每次操作都是幂等的。在单位选择这类场景中，简单的追加操作会导致数据污染，正确的做法应该是先规范化输入值，再执行更新。