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

Posted 2023-02-19

【中文标题】检查另一个输入时如何根据一个输入更改值？反应钩子

【英文标题】：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 时，价格仍然有折扣。

【参考方案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])