当检查另一个输入时，如何根据一个输入更改值?反作用挂钩

Question

在我的组件中，我有5个值的输入范围，每个值都有价格分配。我还有一个输入复选框，我想应用额外的折扣。所以当它被设置为真时，我想使用折扣。我应该写另一个函数吗？或者我可以使用我已经写过的函数之一？

const Cost = () => {
const arr = data.map(arr => arr)//here I have array with data like   {"range": 3,"views": 100,"price":16
},
const [value, setValue] = useState(arr[2])//default value for range
const [checked, setChecked] = useState(false)//default value for checkbox
function handleChangeValue(e) {
setValue(arr[e.target.value - 1])
}//changing price when range is changed

function toggleChange() {
setChecked(prev => !prev)
}//changing checkbox
return (
<>
<Views>{value.views} pageviews</Views>
<Input
value={value.range}
onChange={handleChangeValue}
type="range"
name="range"
min="1"
max="5"
list="views">
</Input>
<Price><span>${value.price}</span>/month</Price>//this is price which I want to  change
<Switch onClick={toggleChange} >
<label className="switch" htmlFor="toggle">
<input name="toggle" type="checkbox" aria-label="toggle" checked={checked} />//when this is set to true I want to apply extra 25% discount to my price
<span className="slider"></span>
</label>
</Switch>

</>
)
}

起初，我想为这些输入创建两个不同的组件，但不确定当时如何更改价格。

总之，当范围改变并且复选框为true时，价格就会改变。你们能提供建议吗？

更新

const [newPrice, setNewPrice] = useState(arr[2].price);
useEffect(() => {
let newPrice = value.price
if (checked) {
newPrice -= 0.25 * newPrice;
} else {
return newPrice
}
setNewPrice(newPrice)
}, [value, checked])

当我将复选框设置为true时，它确实应用了折扣，但当我将其切换回false时，价格仍然有折扣。

Answer 1

我可能不明白所有的事情。但我认为你应该看看useEffect((钩子。

每当某些依赖关系值发生变化时，它都会触发一个函数(此处为checked, range or value(

// considering you have some useState keeping the cost somewhere :
const [cost, setCost] = useState(0);
useEffect(() => {
let newCost = value[range];
if(checked){
// apply extra disount
newCost -= newCost * 25/100;
}
setCost(newCost)
}, [checked, range, value])

Answer 2

溶液

const [newPrice, setNewPrice] = useState(arr[2].price);
useEffect(() => {
let newPrice = value.price
if (checked) {
newPrice -= 0.25 * newPrice;
}
setNewPrice(newPrice)
}, [value, checked])