小编Mor*_*eck的帖子

使用 react-bootstrap 从数组动态创建下拉菜单选项

我现在正在构建一个基于 drupal 的电子商务网站,但被卡住了。总体上对反应和编码仍然很陌生,但正在努力学习。所以我已经使用 redux 和 rest api 提取了我的所有数据,并且我正在获取我的产品、变体和属性。产品页面基于 url 设置特定产品,现在我需要能够通过下拉菜单选择不同的属性。目前我有一个与 react-bootstrap 文档中显示的匹配的占位符下拉列表。但是,我需要根据保存属性的数组在该下拉列表中放置选项。

我确定这很简单,但我一直在四处寻找,但还没有找到有效的答案。希望大家能帮帮忙。

当您查看代码时,请记住,sizes = [] 是我希望将数据作为下拉列表中的可选选项放置的数组。

这是产品页面:

import React, { Component} from 'react';
import '../../css/Home.css';
import MenuBar from "../sub-components/MenuBar";
import LeftMenuBar from "../sub-components/LeftMenuBar";
import "../../css/ProductPage.css"
import WomensWear from "../../media/WomensWear.jpg"
import {
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem } from 'reactstrap';

class ProductPage extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            dropdownOpen: false
        };
    }

    toggle() {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen
        }));
    }

    getProduct() {

        let product …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-bootstrap bootstrap-4

3
推荐指数
1
解决办法
5879
查看次数