列晒筛选

src/components/Range/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Range } from "@nutui/nutui-react-taro";
 import styles from "./index.module.scss";
+import TitleComponent from "../Title";
 
 interface RangeProps {
   min?: number;
@@ -9,6 +10,7 @@ interface RangeProps {
   value?: [number, number];
   onChange?: (value: [number, number]) => void;
   disabled?: boolean;
+  className?: string;
 }
 
 const NtrpRange: React.FC<RangeProps> = ({
@@ -18,15 +20,15 @@ const NtrpRange: React.FC<RangeProps> = ({
   value = [min, max],
   onChange,
   disabled = false,
+  className,
 }) => {
   const [currentValue, setCurrentValue] = useState<[number, number]>(value);
 
   useEffect(() => {
-    setCurrentValue(value);
-  }, [value]);
+    value && setCurrentValue(value);
+  }, [JSON.stringify(value || [])]);
 
   const handleChange = (val: [number, number]) => {
-    console.log("Range value changed:", val);
     setCurrentValue(val);
     onChange?.(val);
   };
@@ -41,32 +43,33 @@ const NtrpRange: React.FC<RangeProps> = ({
 
   const rangContent = useMemo(() => {
     const [start, end] = currentValue || [];
-    if (start === min && end === max) {
+    if (Number(start) === Number(min) && Number(end) === Number(max)) {
       return "不限";
     }
     return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
-  }, [currentValue, min, max]);
+  }, [JSON.stringify(currentValue || []), min, max]);
 
   return (
-    <div className={styles.nutRange}>
+    <div className={`${styles.nutRange} ${className ? className : ''} `}>
       <div className={styles.nutRangeHeader}>
-        <div className={styles.nutRangeHeaderLeft}>
+        {/* <div className={styles.nutRangeHeaderLeft}>
           <div className="ntrp-range__icon">icon</div>
           <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div>
+        </div> */}
+        <TitleComponent title='NTRP水平区间'/>
         <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
       <div>
         <div className={styles.rangeWrapper}>
-          <span className={styles.rangeWrapperMin}>{min}</span>
+          <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
           <Range
             range
             min={min}
             max={max}
             step={step}
-            value={currentValue}
-            onChange={handleChange}
+            // value={currentValue}
+            onEnd={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}
             className={styles.rangeHandle}
@@ -74,16 +77,10 @@ const NtrpRange: React.FC<RangeProps> = ({
             minDescription={null}
             currentDescription={null}
             marks={marks}
-            style={{ color: "gold" }}
           />
-          <span className={styles.rangeWrapperMax}>{max}</span>
+          <span className={styles.rangeWrapperMax}>{max.toFixed(1)}</span>
         </div>
       </div>
-
-      {/* 调试信息 */}
-      <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
-        当前值: {currentValue[0].toFixed(1)} - {currentValue[1].toFixed(1)}
-      </div>
     </div>
   );
 };