React多Range Slider去重校验：重复值拦截与Next按钮控制

核心需求 #

• 所有滑块取值不能重复
• 重复时对应滑块显示错误提示
• 仅当所有值唯一时，启用Next按钮

问题分析 #

你之前的校验逻辑仅对比当前滑块的新旧值，未检查其他滑块的取值，完全没触碰到重复校验的核心；同时直接在组件函数内操作DOM会导致重复执行，不符合React的状态管理逻辑。

修改后的完整代码 #

1. InterestScore.jsx

import React, { useState, useEffect } from 'react'
import subjectCategories from './categories';

export default function InterestScore() {
    // 滑块取值状态
    const [range, setRange] = useState({
        cyberSecurity: "1",
        projectManager: "1",
        developer: "1",
        productManager: "1",
        devOps: "1",
        marketer: "1",
        designer: "1",
        writer: "1"
    });
    // 错误状态：记录重复取值的滑块
    const [errors, setErrors] = useState({});
    // 标记所有值是否唯一，控制Next按钮状态
    const [allUnique, setAllUnique] = useState(false);

    // 校验取值唯一性的核心函数
    const checkUniqueValues = (currentRange) => {
        const values = Object.values(currentRange);
        const valueCount = {};
        const newErrors = {};

        // 统计每个数值出现的次数
        values.forEach(val => {
            valueCount[val] = (valueCount[val] || 0) + 1;
        });

        // 标记重复取值的滑块
        Object.keys(currentRange).forEach(key => {
            if (valueCount[currentRange[key]] > 1) {
                newErrors[key] = "数值不能重复";
            } else {
                delete newErrors[key];
            }
        });

        setErrors(newErrors);
        setAllUnique(Object.keys(newErrors).length === 0);
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setRange(prevRange => {
            const updatedRange = { ...prevRange, [name]: value };
            // 更新后立即执行唯一性校验
            checkUniqueValues(updatedRange);
            return updatedRange;
        });
    };

    // 用useEffect处理滑块样式，避免重复执行DOM操作
    useEffect(() => {
        const sliders = document.querySelectorAll('input[type="range"].slider-progress');
        sliders.forEach(e => {
            e.style.setProperty('--value', e.value);
            e.style.setProperty('--min', e.min === '' ? '1' : e.min);
            e.style.setProperty('--max', e.max === '' ? '10' : e.max);
            const updateValue = () => e.style.setProperty('--value', e.value);
            e.addEventListener('input', updateValue);
            // 清理函数防止内存泄漏
            return () => e.removeEventListener('input', updateValue);
        });
    }, []);

    // 初始化时执行一次校验
    useEffect(() => {
        checkUniqueValues(range);
    }, []);

    return (
        <div className='interest_score'>
            <div className='q_card'>
                <p>为以下职位打分，体现你的兴趣程度：</p>
                <div className='range_container'>
                    {subjectCategories && subjectCategories.map((category) => {
                        const hasError = errors[category.name];
                        return (
                            <div className={`category_group ${hasError ? 'error' : ''}`} key={category.id}>
                                <div className='labels'>
                                    <label className='range_label'>{category.subject}</label>
                                    <span>{range[category.name]}/10</span>
                                </div>
                                <input
                                    type='range'
                                    min='1'
                                    max='10'
                                    name={category.name}
                                    className='styled-slider slider-progress'
                                    onChange={handleChange}
                                    value={range[category.name]}
                                />
                                {/* 显示错误提示 */}
                                {hasError && <span className='error-text'>{hasError}</span>}
                            </div>
                        );
                    })}
                </div>
                <p>* 不能重复选择同一个数值</p>
                {/* 根据唯一性状态控制按钮启用 */}
                <button className='next' disabled={!allUnique}>Next</button>
            </div>
        </div>
    )
}

2. 新增CSS错误样式

在原有CSS文件末尾添加：

/* 错误状态的滑块样式 */
.category_group.error input.styled-slider {
    border-color: #ff4444;
}

/* 错误提示文本样式 */
.error-text {
    color: #ff4444;
    font-size: 12px;
    margin-top: 4px;
}

/* 禁用状态的按钮样式 */
.next:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

3. categories.js保持不变

const subjectCategories = [
    {id:1,subject:"Cyber Security",name:"cyberSecurity"},
    {id:2,subject:"Project Manager",name:"projectManager"},
    {id:3,subject:"Developer",name:"developer"},
    {id:4,subject:"Product Manager",name:"productManager"},
    {id:5,subject:"DevOps",name:"devOps"},
    {id:6,subject:"Marketer",name:"marketer"},
    {id:7,subject:"Designer",name:"designer"},
    {id:8,subject:"Writer",name:"writer"}
]

export default subjectCategories;

关键修改说明 #

• 新增状态管理：用errors对象记录重复取值的滑块，allUnique变量控制Next按钮的启用状态
• 唯一性校验逻辑：通过统计每个数值的出现次数，精准标记重复取值的滑块
• 修复DOM操作问题：用useEffect处理滑块样式初始化和事件绑定，避免重复执行和内存泄漏
• 错误可视化：给重复取值的滑块添加红色边框，显示错误文本，提升用户感知
• 按钮状态控制：只有当所有滑块取值唯一时，Next按钮才处于可点击状态

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