javascript - 反应如何处理组件中顶部边框的调整大小
问题描述
最近我使用 React 创建了我的选项卡式抽屉组件,我想添加另一个功能来使抽屉可以调整大小,向上或向下拖动顶部边框。
我知道我可以在组件状态下设置高度,创建一个函数来处理事件,当 this.state.height 发生变化时,React 会再次将组件渲染到正确的高度。
我知道我可以使用 resizable 函数使用 JQuery 来处理这个问题,但如果可能的话,我会避免直接与 DOM 交互,因为这是 React 的目标。
几周前我开始用 JS 编写代码,但我遗漏了以下几点:
如何在 div 容器 id="drawer" 的顶部边框中处理或创建事件?
如何使此事件返回一个值,该值指示鼠标在高度方面停止的位置,以获取一个新值来调用 setStatus 并再次以正确的高度渲染我的组件?
在我的代码下面:
define(function (require) {
var React = require('react');
var DrawerButton = require('./DrawerButton');
require('./TabbedDrawer.less');
class TabbedDrawer extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerOpened: false,
buttonSelected: null,
drawerHeight: 0
}
this.openDrawer = this.openDrawer.bind(this);
this.renderMyLabels = this.renderMyLabels.bind(this);
this.resizeDrawer = this.resizeDrawer.bind(this);
}
renderMyLabels() {
var renderedLabels = this.props.labels.map(function(label, _key) {
return (
<DrawerButton
functionDrawer={this.openDrawer}
labelKey={_key}
buttonSelected={this.state.buttonSelected}
drawerOpened={this.state.drawerOpened}>
{label}
</DrawerButton>
);
}, this);
return renderedLabels;
}
openDrawer(buttonClicked) {
if(this.state.drawerOpened && (buttonClicked == this.state.buttonSelected)) {
this.setState({buttonSelected: null,
drawerOpened: !this.state.drawerOpened});
} else if(this.state.drawerOpened && (buttonClicked != this.state.buttonSelected)) {
this.setState({buttonSelected: buttonClicked});
} else {
this.setState({buttonSelected: buttonClicked,
drawerOpened: !this.state.drawerOpened});
}
}
render() {
const ElementToRender = (this.state.buttonSelected !== null) ? this.props.children[this.state.buttonSelected] : null;
const myElement = (ElementToRender !== null) ? <ElementToRender /> : "";
const drawerStyle = this.state.drawerOpened ? {display: 'block'} : {display: 'none'};
const tabStyle = this.state.drawerOpened ? {bottom: '250px'} : {bottom: '0px'};
return (
<div id="testDrawer">
<span id="tabber" style={tabStyle}>
{this.renderMyLabels()}
</span>
<div id="drawer" style={drawerStyle}>
<div className="topLine" >
</div>
{myElement}
</div>
</div>
);
}
}
return TabbedDrawer;
});
@import "./../../../../style/less/components/colors";
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#geppettoDrawer {
display: inline-block;
}
#tabber {
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
border-bottom: 0.5px solid rgb(252, 99, 32);
width: 100%;
display: block;
margin-top: 0px;
text-decoration: none;
left: 0;
bottom: 0;
position: absolute;
background: transparent;
}
#tabButton {
color: @primary_color;
margin: 0 auto;
margin-bottom: 26px;
position: relative;
border-color: rgb(252, 99, 32);
border: 0.5px;
border-bottom: 0px;
border-style: solid;
box-shadow: none;
text-shadow: none;
width: 140px;
height: 35px;
padding: 7px 20px;
text-align: center;
display: inline-block;
cursor: pointer!important;
background: rgba(50, 50, 53, 0.8);
}
#drawer {
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
height: 250px;
width: 100%;
background-color: black;
color: white;
position: fixed;
bottom: 0px;
left: 0px;
display: none;
transition: opacity 1s ease-out;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
background: rgba(50, 50, 53, 0.8);
}
解决方案
我会在这里查看可用的事件:https ://reactjs.org/docs/events.html 我还会查看另一个线程:推荐的方式使 React 组件/div 可拖动
推荐阅读
- javascript - 如何在 Plotly 中将图例放置在顶部而不是底部?
- excel - 带有数字结果的 Excel 下拉列表(不是文本)
- javafx - 在一行中间添加一个节点 java fx
- c# - 正则表达式在组内查找值
- node.js - Node.js - 无需 html 即可直接从浏览器下载的服务文件
- c# - INotifyDataErrorInfo ErrorsChanged 不适用于绑定到 ListCollectionView 的 UI 元素
- python-3.x - 输出保持垂直打印
- ios - 如何连接到不在 iOS 应用程序中广告服务 UUID 的 BLE 设备
- powerbi - 在 Power Pivot / DAX 中创建基于日期范围计算可用设备的度量
- javascript - 通过 react csv 传递 api 数据