检查另一个输入时如何根据一个输入更改值？反应钩子答案

【问题标题】：How to change the value depending on one input when another input is checked? React hooks检查另一个输入时如何根据一个输入更改值？反应钩子
【发布时间】：2021-09-19 15:41:03
【问题描述】：

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

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>


        </>
    )
}

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

总而言之 - 当范围改变并且复选框为真时，价格也会改变。大家能给点建议吗？

更新

    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 时，价格仍然有折扣。

【问题讨论】：

标签： reactjs input react-hooks

【解决方案1】：

我可能不明白这一切。但我认为你应该看看useEffect() hook。

每次一些依赖值改变时它都会触发一个函数（这里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])

【讨论】：

非常感谢！我确实有一个问题 - 当我将复选框设置为 true 时，代码确实应用了折扣，但是当我将其切换回 false 时，价格仍然有折扣。我已经更新了我的问题。
我看了你的更新...问题与useEffect中的“return”语句有关...为什么return？似乎你没有完全明白它的作用......提示：当你“返回”时，函数的结尾没有被执行......;）
我已经删除了整个“else”部分，现在它可以正常工作了！非常感谢

【解决方案2】：

解决方案

    const [newPrice, setNewPrice] = useState(arr[2].price);

    useEffect(() => {
        let newPrice = value.price
        if (checked) {
            newPrice -= 0.25 * newPrice;

        }

        setNewPrice(newPrice)

    }, [value, checked])

【讨论】：