相关疑难解决方法(0)
如何检测DIV的尺寸变化？
我有以下示例html,有一个100%宽度的DIV.它包含一些元素.在执行窗口重新调整大小时,可以重新定位内部元素,并且div的尺寸可以改变.我问是否可以挂钩div的尺寸变化事件？以及如何做到这一点？我目前将回调函数绑定到目标DIV上的jQuery resize事件,但是,没有输出控制台日志,请参见下文:
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
$('#test_div').bind('resize', function(){
console.log('resized');
});
</script>
</head>
<body>
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
</body>
</html>
314
推荐指数
推荐指数
14
解决办法
解决办法
32万
查看次数
查看次数
使<div>可调整大小
有没有办法让drag'n'drop可以调整<div>容器的大小？这样用户可以使用拖放来改变它的大小？
真的很感激任何帮助!
27
推荐指数
推荐指数
3
解决办法
解决办法
4万
查看次数
查看次数
在组件上触发"调整大小"事件？
我正在编写一个组件装饰器,能够检测DOM元素的大小何时被更改(通过css,javascript,窗口调整大小等).
它已经完美运行了,我现在正在尝试使其API易于使用,那么,比这更容易？
class Foobar extends React.Component {
render() {
return <div onResize={() => console.log('resized!')}>Foobar</div>;
}
}
ReactDOM.render(resizeAware(Foobar), app);
我面临的问题是,onResize当我触发它时,事件没有被触发......
这是两次触发事件的尝试:
// method 1
onResize() {
const resizeEvent = document.createEvent('HTMLEvents');
resizeEvent.initEvent('resize', true, true);
console.log('triggering resize...');
findDOMNode(this.componentNode).dispatchEvent(resizeEvent);
}
// method 2
onResize() {
console.log('triggering resize...');
findDOMNode(this.componentNode).dispatchEvent(new Event('resize'));
}
如果我用以下方式收听活动:
findDOMNode(this).addEventListener('resize', () => console.log('resized'));
一切正常.因此,我调度的事件似乎是由真正的DOM元素而不是虚拟DOM接收的.
现在的问题是,为什么onResize不调用回调？
如果没有解决方案,您将如何使我的装饰器API可用？
注意:我不想要一种方法来检测组件的大小调整,我只需要将一个事件发送到React并使其可以访问 onResize
10
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数