賦值很慢

Question

我在 React 中使用條件渲染創建了一個范圍 slider，我有一個 select 輸入基於范圍 slider 的最小值最大值將改變，如果觸摸范圍 slider 的拇指放錯了位置。 第一個事件的值在第二個事件之后分配。 我需要解決兩個問題，

1.select輸入每次變化后slider的拇指應該居中

2.賦值慢

我在下面附上我的代碼

   const [cost,setCost] =  useState();
    const [leads,setLeads] = useState();
    const [title,setTitle] = useState();
    const [min,setMin] = useState();
    const [max,setMax] = useState();
    const [range, setRange] = useState();
    const [low, setLow] = useState(false);
    const [high,setHigh] = useState(false);
    const [selected,setSelected] = useState(false);

    function handleChange(event){
      console.log(cost);
      setSelected(true);
        var category = event.target.value;
        setTitle(category);
        console.log(category);
        if(category === "Acrylic Bath"){
           setMin(85);
           setMax(415);
           setCost(250);
           setLeads("1-2");
        }else if(category === "Awinings"){
          setMin(85);
           setMax(165);
          setCost(120);
          setLeads("2-3");
        }else if(category === "Cabinet Refacing"){
          setMin(185);
           setMax(415);
          setCost(250);
          setLeads("1-2");
        }else if(category ==="Carpentry"){
          setMin(25);
           setMax(95);
          setCost(60);
          setLeads("1-2");
        }
      }
    
    function handleRange(event){
      event.persist();
        setCost(event.target.value);
        console.log(cost);
        if(title === "Acrylic Bath"){
          if(cost >= 226 && cost <= 325){
            setLeads("1-2");
            setLow(false);
            setHigh(false);
          }else if(cost >= 326 && cost <= 400){
            setLeads("2-3");
            setLow(false);
            setHigh(false);
          }
          else if(cost >= 200 && cost <= 225){
            setLeads("0-1");
            setLow(false);
            setHigh(false);
          }else if (cost < 200){
            setLow(true);
            setHigh(false);
          }else if(cost > 400){
            setLow(false);
            setHigh(true);
          }  
        }else if(title === "Awinings"){
          if(cost >= 105 && cost <= 114){
            setLeads("1-2");
            setLow(false);
            setHigh(false);
          }else if(cost >= 100 && cost <= 104){
            setLeads("0-1");
            setLow(false);
            setHigh(false);
          }else if(cost >= 116 && cost <= 127){
            setLeads("2-3");
            setLow(false);
            setHigh(false);
          }else if(cost >= 128 && cost <= 141){
            setLeads("3-4");
            setLow(false);
            setHigh(false);
          }else if(cost >= 142 && cost <= 150){
            setLeads("4-5");
            setLow(false);
            setHigh(false);
          }else if (cost < 100){
            setLow(true);
            setHigh(false);
          }else if(cost > 150){
            setLow(false);
            setHigh(true);
          }  
        }else if(title === "Cabinet Refacing"){
          if(cost >= 226 && cost <= 325){
            setLeads("1-2");
            setLow(false);
            setHigh(false);
          }else if(cost >= 326 && cost <= 400){
            setLeads("2-3");
            setLow(false);
            setHigh(false);
          }
          else if(cost >= 200 && cost <= 225){
            setLeads("0-1");
            setLow(false);
            setHigh(false);
          }else if (cost < 200){
            setLow(true);
            setHigh(false);
          }else if(cost > 400){
            setLow(false);
            setHigh(true);
          }  
        }else if(title === "Carpentry"){
          if(cost >= 50 && cost <= 70){
            setLeads("1-2");
            setLow(false);
            setHigh(false);
          }else if(cost >= 70 && cost <= 80){
            setLeads("2-3");
            setLow(false);
            setHigh(false);
          }
          else if(cost >= 40 && cost <= 49){
            setLeads("0-1");
            setLow(false);
            setHigh(false);
          }else if (cost < 40){
            setLow(true);
            setHigh(false);
          }else if(cost > 80){
            setLow(false);
            setHigh(true);
          }  
        }
      }
    

  return(
    <div className="calculator">
    <div className="container">
        <h1 className="calc-h">Price Calculator</h1>
        <p className="calc-p text-center">Title/Category</p>
        <select  name="category" onChange={handleChange} className="select" placeholder="Select One" id="category">
            <option value="" disabled selected hidden>Select One</option>
            <option value="Acrylic Bath">Acrylic Bath</option>
            <option value="Awinings">Awinings</option>
            <option value="Cabinet Refacing">Cabinet Refacing</option>
            <option value="Carpentry">Carpentry</option>
        </select>
        <p className="text-center calc-p">Set your lead price</p>
         {selected ? 
          <div>                  
        <input
        type="range"
        name="range"
        className="slider"
        min={min}
        max={max}
        Value={cost}
        onChange={handleRange}
        data-orientation="horizontal"
        step="1"
        />
         <br></br>
         <h4 className="text-center drag-h">${cost} per valid lead</h4>
         {high ?
          <p className="text-center drag-h">At this price you are overpaying</p>
         :
         <div>
         {low ?
          <p className="text-center drag-h">Price <span class="red">too low</span> to provide estimate</p>
          :
          <p className="text-center drag-h">At this price you can expect <span className="highlight">{leads} leads per day</span></p>
         }         
         </div>
         }
         </div>
         :
         <div>         
         <input
        type="range"
        name="range"
        className="slider"
        data-orientation="horizontal"
        disabled
        />
         <br></br>
          <h4 className="text-center drag-h">Drag to set your lead price</h4>
          </div>
         }

        <button className="sign-btn">SIGN UP</button>
        <br></br>
        <span className="span">Estimates are not a guarantee of performance, numbers based on a service area of approximately 300,000 homeowners.</span>
    </div>
   </div>

  );
}

我需要范圍 slider thumb 位於中心

Answer 1

關於第二個問題，我建議使用 lodash.debounce 來更新值

    const handleChangeDebounce = useCallback(debounce(() => {
      // update the value here
    }, 300), [])

    <input
     type="range"
     name="range"
     className="slider"
     min={min}
     max={max}
     //Value={cost} // will not assign value here
     onChange={handleChangeDebounce}
     data-orientation="horizontal"
     step="1"
    />

現在的問題是設置輸入的默認值：

    <input
     defaultValue={defaultInputValue}
     ...
    />