Question

最近我使用React创建了标签式抽屉组件，我想添加另一个功能，使抽屉可调整大小，向上或向下拖动顶部边框。

我知道我可以在组件状态中设置高度，创建一个处理事件的函数以及当this.state.height更改时，React将再次将组件渲染到正确的高度。

我知道我可以使用可调整大小的函数使用JQuery处理这个问题但是如果可能的话我会避免直接与DOM交互，因为这是React的目的。

几周前我开始在JS编写代码，我错过了以下几点：

如何处理或创建div容器顶部边框中的事件id =＆＃34;抽屉＆＃34;？
如何使此事件返回一个值，该值指示鼠标在高度方面停止的位置以获取新值以调用setStatus并再次使用正确的高度渲染我的组件？
< / LI>

在我的代码下面：

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

了解如何处理组件

1 个答案: