reactjs - reactjs 需要帮助创建带有清单的下拉列表

Question

落下

到目前为止创建

我在弄清楚如何使用清单进行第二个下拉菜单时遇到问题，并且根据他们选择的网站有不同的选项可供选择

非常感谢

 import React, { Component } from "react";

    import "./DropDown.css";

    class DropDown extends Component {
      state = {
        ...this.props,
        items: this.props.items || [],
        selectedItem: this.props.items[0] || this.props.selectedItem,
        showItems: false
      };

      dropDown = () => {
        this.setState(prevState => ({
          showItems: !prevState.showItems
        }));
      };

      selectItem = item => {
        this.setState({
          selectedItem: item,
          showItems: false
        });
      };

      render() {
        return (
          <div>
            <div className="select-box--box">
              <div className="select-box--container">
                <div className="select-box--selected-item">
                  {this.state.selectedItem.value}
                </div>
                <div className="select-box--arrow" onClick={this.dropDown}>
                  <span
                    className={`${
                      this.state.showItems
                        ? "select-box--arrow-up"
                        : "select-box--arrow-down"
                    }`}
                  />
                </div>
              </div>
              <div
                className="select-box--items"
                style={{ display: this.state.showItems ? "block" : "none" }}
              >
                {this.state.items.map(item => (
                  <div
                    key={item.id}
                    onClick={() => this.selectItem(item)}
                    className={this.state.selectedItem === item ? "selected" : ""}
                  >
                    {item.value}
                  </div>
                ))}
              </div>
            </div>
            <input
              type="hidden"
              name={this.state.name}
              value={this.state.selectedItem.id}
            />
          </div>
        );
      }
    }

    export default DropDown;

Dropdown css

    * {
      box-sizing: border-box;
    }

    .select-box--container {
      height: 30px;
      border: 1px solid #aaa;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }

    .select-box--box {
      width: 180px;
      position: absolute;
      left: 0;
    }

    .select-box--arrow {
      width: 30px;
      height: 30px;
      margin: 0px;
      padding: 0px;
      display: inline-block;
      background: #aaa;
      position: absolute;
      right: 0;
      top: 0;
    }

    .select-box--selected-item {
      display: inline-block;
      height: 100%;
      width: 100%;
      padding: 4px 12px;
      vertical-align: middle;
    }

    .select-box--items {
    }

    .select-box--items div {
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding: 6px;
      padding-left: 20px;
    }

    .select-box--items div.selected {
      background-image: url("/check.png");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: 2px 8px;
    }

    .select-box--items div:hover {
      background-color: #eee;
    }

    .select-box--arrow-down {
      position: absolute;
      top: 12px;
      left: 8px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;

      border-top: 10px solid #fff;
    }

    .select-box--arrow-up {
      position: absolute;
      top: 10px;
      left: 8px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;

      border-bottom: 10px solid #fff;
    }

import React, { Component } from "react";
import DropDown from "./dropdown/DropDown";
import DropDownList from "../dashboard/dropdown-checklist/DropDownList";

    class Dashboard extends Component {
      render() {
        return (
          <div>
            <h1>NAVMACSS Dashboard For Test scenarios</h1>
            <div style={{ margin: "16px", position: "relative" }}>
              <DropDown
                name="venue[country_id]"
                items={[{ value: "Verizon", id: 1 }, { value: "Macy's", id: 2 }]}
              />
            </div>
          </div>
        );
      }
    }

    export default Dashboard;

这是我为第一个下拉菜单编写的代码。我只有我需要创建的块的模型

所以我需要做的是基于我选择的选项是verizon还是Macy's 我需要使用清单填充不同的选项，用户可以从下拉列表中选择多个选项

标签： reactjs