javascript - react 如何处理组件中顶部边框的大小调整

Question

最近我使用 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);
}

Answer 1

我会在这里查看可用事件:https://reactjs.org/docs/events.html 我还会查看其他线程:Recommended way of making React component/div draggable