【发布时间】：2016-11-08 14:00:01
【问题描述】：
我正在尝试使用 react 和基础创建动态调整大小的面板。我已经尝试过 react-split-pane 和其他类似的库，但是它们扰乱了页面的响应性。我也尝试了 resize css3 属性，但它并不灵活，因为它只允许容器的大小仅调整到右侧和底部，并且我无法将调整大小手柄设置为水平或垂直条。
任何建议都会有所帮助。
【问题讨论】：
-
我一直在为自己的项目玩这个，但还没有找到一个好的解决方案。我一直在尝试使用
onDrag事件和draggable={true}设置在我的组件边框上的句柄上。当onDrag事件触发时，回调接收一个带有clientY属性的event对象（或clientX）来指示它的新位置。在我的处理函数中，我区分了新的clientY和旧的clientY，以确定用户移动鼠标的方向。然后this.setState({panelSize: this.state.panelSize + increment})。我的面板高度设置为this.state.panelSize。 -
[...cont] 不幸的是这个方法计算量有点大，所以运行的不是很顺利，但也许通过调整大小
increment或debounceing更新函数可以平滑出来。无论如何，如果我走得更远，我会在这里发布，但如果这仍然在你的待办事项列表上，我想分享方法。
标签： javascript reactjs css zurb-foundation