时间戳

首页 > 解决方案 > 更改“react-sidebar”库中按钮的位置

javascript - 更改“react-sidebar”库中按钮的位置

问题描述

我使用图书馆：https ://www.npmjs.com/package/react-sidebar 。我把按钮放进去section2，它位于section1. 我也不能滚动。如何将按钮移动到section2？按钮在滚动过程中不移动。

此处代码：https ://stackblitz.com/edit/react-2euk2q

抽奖：https ://imgur.com/7xpmy93

import Sidebar from "react-sidebar";


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      sidebarOpen: false
    };
  }

  onSetSidebarOpen = (open) => {
    this.setState({ sidebarOpen: open });
  }

  render() {
    return (
      <div className="container">
          <div className="section1">
           <p>Lorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodo</p>
          </div>
          <div className="section2">
            <Sidebar
              sidebar={ 'Lorem ipsum'}
              open={this.state.sidebarOpen}
              onSetOpen={this.onSetSidebarOpen}
              styles={{ sidebar: { background: "white" } }}
              pullRight={true}
            >
            <button onClick={() => this.onSetSidebarOpen(true)}>
              Open sidebar
            </button>
          </Sidebar>
             <p>Lorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodo</p>
          </div>
      </div>
    );
  }
}

CSS

.container {
  height: 400px;
  width: 400px;
  border: 1px solid black;
  overflow: scroll;
  display: flex;
  flex-direction: row;
}

.section1 {
  border: 1px solid red;
}

.section2 {
  border: 1px solid yellow;
}

.section2 button {
  left: 200px !important;
}

标签： javascriptreactjs

解决方案

你的Sidebar组件有它自己的CSS，

position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;

您需要添加postion:relative到您的section2.

.section2 {
  border: 1px solid yellow;
  position: relative;     //Add this
}

现在您的按钮将位于左上角，您可以使用任意位置移动该按钮CSS。

.section2 button{
  position:absolute;
  right: 0;
}

推荐阅读