在 react-rnd 中使用 onResize 道具时是不是可以根据方向更改值

Posted 2023-05-08

【中文标题】在 react-rnd 中使用 onResize 道具时是不是可以根据方向更改值

【英文标题】：Is it possible to change a value based on the direction when using onResize prop in react-rnd在 react-rnd 中使用 onResize 道具时是否可以根据方向更改值

【发布时间】：2021-11-08 21:05:10

【问题描述】：

问题概述 大家好， 我正在使用 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 轴，但是有什么方法可以指定方向

【参考方案1】：

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

 onResize=(e, direction) => 
        if (direction !== "bottom" && direction !== "top") return itemHeight;
        return itemHeight < 100 ? setItemHeight(itemHeight + 1) : itemHeight;
      

【讨论】：

谢谢你 Maxwell Jhonson，它真的很管用，我没想到会这样。非常感谢您的帮助。

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