Question

在成帧器中更改另一个滑块时，我试图使用替代来更新滑块的值。

我有以下代码：

import * as React from "react"
import { Override, Data } from "framer"

const appState = Data({
    number: "0",
})

const appStateInv = Data({
    number: "50",
})

export function ControllingSlider(): Override {
    return {
        onChange: (number) => {
            appState.number = Math.floor(number).toString()
            appStateInv.number = ("100" - Math.floor(number)).toString()
        },
    }
}

export function Number(): Override {
    return {
        text: appState.number + "%",
    }
}

export function NumberInv(): Override {
    return {
        text: appStateInv.number + "%",
    }
}

export function TargetSlider(): Override {
    return {
        value: appStateInv.number,
    }
}

每当更改控制滑块时，这也会从Number()和NumberInv()函数更新页面上的几个文本值。 TargetSlider()函数应该可以更新另一个“目标”滑块。

当我更改appStateInv常数的值时，目标滑块的位置也会改变。但是，当控制滑块的位置发生变化时，即使文本元素由数字功能更新而没有任何问题，目标滑块的位置也不会改变。

每当移动控制滑块时，我应该更改什么以更新目标滑块的位置？

如果有帮助，您可以编辑类似滑块here的代码，这里是explanation的组件在Framer中的通信方式。

更改另一个滑块时，在成帧器中更新滑块值

0 个答案: