在 react-rnd 中使用 onResize prop 时是否可以根据方向更改值

Question

问题概览大家好，我正在使用 react-rnd 版本 [10.3.4]

我的浏览器是：Chrome

使用 react-rnd 的库

我确定这个问题不是重复的？我检查了问题，但可能被遗漏了。

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

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

预期行为 draggable/resizable 组件内的值应该只在一个轴或方向上变化

实际行为两个 (x & y) axis/directions

的值都在变化

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

Answer 1

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

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

在 react-rnd 中使用 onResize prop 时是否可以根据方向更改值

Is it possible to change a value based on the direction when using onResize prop in react-rnd

reactjs

drag-and-drop

resizable

react-dnd

react-resize-observer