时间戳

首页 > 解决方案 > 如何使用 ReactJS 使下拉列表可滚动？

reactjs - 如何使用 ReactJS 使下拉列表可滚动？

问题描述

我正在做一个项目，我需要制作一个下拉菜单，该下拉菜单将具有以下功能。

  1. 使用箭头键向上/向下移动
  2. 可滚动
  3. 搜索

这是我迄今为止尝试创建下拉列表的代码。

import React from 'react';
import './style.css';


class Dropdown extends React.Component {
constructor(){
 super();

 this.state = {
       displayMenu: false,
     };

  this.showDropdownMenu = this.showDropdownMenu.bind(this);
  this.hideDropdownMenu = this.hideDropdownMenu.bind(this);

};

showDropdownMenu(event) {
    event.preventDefault();
    this.setState({ displayMenu: true }, () => {
    document.addEventListener('click', this.hideDropdownMenu);
    });
  }

  hideDropdownMenu() {
    this.setState({ displayMenu: false }, () => {
      document.removeEventListener('click', this.hideDropdownMenu);
    });

  }

  render() {
    return (
        <div  className="dropdown" style = {{background:"red",width:"200px"}} >
            <div className="button" onClick={this.showDropdownMenu}> My Setting </div>
            {
              this.state.displayMenu ? (
                <ul>
                      <li><a className="active" href="#Create Page">Create Page</a></li>
                  <li><a href="#Manage Pages">Manage Pages</a></li>
                  <li><a href="#Create Ads">Create Ads</a></li>
                  <li><a href="#Activity Logs">Activity Logs</a></li>
                  <li><a href="#Setting">Setting</a></li>
                  <li><a href="#Log Out">Log Out</a></li>
                </ul>
              ): ( null )
            }
        </div>
    );
  }
}
export default Dropdown;

请帮助我编写代码以使其可滚动。提前致谢！

标签： reactjs

解决方案

应用程序.js

// App.js
import React, { useState } from 'react';
import './style.css';

const App = () => {
  const [toggle, setToggle] = useState(false);

  return(
    <div className="container">
      <button onClick={() => setToggle(!toggle)}>Dropdown<button>
      <ul className={`${toggle ? show : ''}`}>
        <li>one</li>
        <li>two</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
      </ul>
    </div>
  );
}

样式.css

// style.css
.container{
  position: relative;
}

ul{
  height: 50px;       // fixed height
  overflow: hidden;   // then set overflow to hidden in all respects
  overflow-y: scroll; // At the end only from the top and bottom overflow to scrollable
  background: 'red';
  display: none;
}

.show{
    display: block !important;
}

推荐阅读