Javascript react组件中的切换效果

我正在尝试将vanillaJS中编码的旧组件转换为react，以将其添加到新项目中

该组件包含两个

输入

，一个带有类型

范围

，另一个带有类型

复选框

，以及两个

变量

，它们随钩子

使用状态

而改变状态，具体取决于

输入

触发的事件。 例如，当某人使用类型

范围
移动
输入
时，函数
handlePriceChange
将被触发，并且两个
变量
将
设置为基于
范围的新值
，同时，函数检查是否选中了带有类型
复选框的
输入
，如果这是
真的
，则将从
价格
变量中减去25%，否则它将返回相同的价格而不打折

问题是每次我点击
复选框时，折扣都会被取消，但是
价格
的值会返回到其原始状态，
范围
条会返回到中间

我一直在思考如何解决这个问题，我认为最好的方法之一是
useffect
，但我对react是新手，我对新想法持开放态度

在这里，您可以看到一个运行代码的沙箱：

这是组件的代码：


导出默认函数App（）{
const[value，setValue]=useState（0）；
const[price，setPrice]=使用状态（8）；
const[plan，setPlan]=使用状态（“10k”）；
const[toggle，setToggle]=useState（false）；
常量handleDiscount=（）=>{
setToggle（（toggle）=>！toggle）；
};
常数handlePriceChange=（e）=>{
const valueChange=e.target.value；
设置值（值更改）；
定价=8；
如果（（值>0）和（值20和值40和值60和值80和值您可以保持
价格
状态不变，而不应用
折扣
，因为它是
价格
和
hasDiscount
的派生值（我会将
切换
状态更改为该命名或类似的内容）

从复选框输入中删除
onChange
，仅保留
onClick
。要显示您将根据
hasDiscount
状态计算的价格：

import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);
  const [price, setPrice] = useState(8);
  const [plan, setPlan] = useState("10k");
  const [hasDiscount, setHasDiscount] = useState(false);

  const handleDiscount = () => {
    setHasDiscount((hasDiscount) => !hasDiscount);
  };

  const finalPrice = hasDiscount ? price * 0.75 : price;

  const handlePriceChange = (e) => {
    const valueChange = e.target.value;
    setValue(valueChange);
    let pricing = 8;
    if ((value > 0) & (value <= 20)) {
      setPlan("10k");
      pricing = 8;
    } else if (value > 20 && value <= 40) {
      setPlan("50k");
      pricing = 12;
    } else if (value > 40 && value <= 60) {
      setPlan("100k");
      pricing = 16;
    } else if (value > 60 && value <= 80) {
      setPlan("500k");
      pricing = 24;
    } else if (value > 80 && value <= 100) {
      setPlan("1M");
      pricing = 36;
    }

    setPrice(pricing);
  };

  return (
    <div className="App">
      <input
        type="range"
        name="range"
        value={value}
        min="0"
        max="100"
        className="slider"
        id="range"
        onChange={handlePriceChange}
      />
      <input
        type="checkbox"
        name="discount"
        className="discount"
        id="discount"
        onClick={handleDiscount}
      />
      <> {finalPrice} </>
      <hr />
      <> {plan} Pageviews </>
    </div>
  );
}

从“react”导入{useState}；
导出默认函数App（）{
const[value，setValue]=useState（0）；
const[price，setPrice]=使用状态（8）；
const[plan，setPlan]=使用状态（“10k”）；
const[hasDiscount，setHasDiscount]=useState（false）；
常量handleDiscount=（）=>{
setHasDiscount（（hasDiscount）=>！hasDiscount）；
};
const finalPrice=Has折扣？价格*0.75：价格；
常数handlePriceChange=（e）=>{
const valueChange=e.target.value；
设置值（值更改）；
定价=8；
如果（（值>0）和（值20和值40和值60和值80和值