0

问题概述嗨团队,我正在使用 react-rnd 版本 [10.3.4]

我的浏览器是:Chrome

使用 react-rnd 的库

我确定这个问题不是重复的?我检查了问题,但可能错过了。

复制项目 - https://codesandbox.io/s/frosty-field-dul70?file=/src/Resize.js

描述问题 - 我正在尝试根据调整大小的方向更改状态。例如,您可以在上面的代码框链接中检查,如果您在 x 或 y 轴上调整组件的大小,则值会发生变化。但我希望行为仅在 y 轴上,即在 x 轴上调整大小时值不应该改变。

预期行为 可拖动/可调整大小组件内的值应仅在一个轴或方向上改变

实际行为值在(x 和 y)轴/方向上都在变化

另外,如何根据方向更改 itemHeight 的值。因此,如果它是“底部” itemHeight 应该增加,如果它是“顶部” itemHeight 应该减少。我想您说“底部”和“顶部”代表 y 轴,但有什么方法可以指定方向

4

1 回答 1

1

您可以在 onResize 事件上使用第二个参数。底部和顶部代表 y 轴

 onResize={(e, direction) => {
        if (direction !== "bottom" && direction !== "top") return itemHeight;
        return itemHeight < 100 ? setItemHeight(itemHeight + 1) : itemHeight;
      }}
于 2021-09-13T17:32:02.787 回答