列表综合筛选

src/components/Range/index.tsx

@@ -8,9 +8,10 @@ interface RangeProps {
   max?: number;
   step?: number;
   value?: [number, number];
-  onChange?: (value: [number, number]) => void;
+  onChange?: (name: string, value: [number, number]) => void;
   disabled?: boolean;
   className?: string;
+  name: string;
 }
 
 const NtrpRange: React.FC<RangeProps> = ({
@@ -21,16 +22,18 @@ const NtrpRange: React.FC<RangeProps> = ({
   onChange,
   disabled = false,
   className,
+  name,
 }) => {
   const [currentValue, setCurrentValue] = useState<[number, number]>(value);
-
+console.log('===currentValue', currentValue)
   useEffect(() => {
+    console.log('===rrr', value)
     value && setCurrentValue(value);
   }, [JSON.stringify(value || [])]);
 
   const handleChange = (val: [number, number]) => {
     setCurrentValue(val);
-    onChange?.(val);
+    onChange?.(name, val);
   };
 
   const marks = useMemo(() => {
@@ -50,13 +53,9 @@ const NtrpRange: React.FC<RangeProps> = ({
   }, [JSON.stringify(currentValue || []), min, max]);
 
   return (
-    <div className={`${styles.nutRange} ${className ? className : ''} `}>
+    <div className={`${styles.nutRange} ${className ? className : ""} `}>
       <div className={styles.nutRangeHeader}>
-        {/* <div className={styles.nutRangeHeaderLeft}>
-          <div className="ntrp-range__icon">icon</div>
-          <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div> */}
-        <TitleComponent title='NTRP水平区间'/>
+        <TitleComponent title="NTRP水平区间" />
         <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
@@ -68,7 +67,7 @@ const NtrpRange: React.FC<RangeProps> = ({
             min={min}
             max={max}
             step={step}
-            // value={currentValue}
+            value={currentValue}
             onEnd={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}