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

Question

我正在构建一个基于Drupal的电子商务网站，但遇到了困难。我对React和编码一般都还不熟悉，但正在努力学习。因此，我已经将所有数据拉取到了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 = null;
        let sizes = [];
        if (this.props.products && this.props.products.items.length) {
            product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);

            if (product && this.props.variations && this.props.attributes) {
                product.something = [];
                for (let i = 0; i < product.variations.length; i++) {
                    let varid = product.variations[i].target_id;
                    let variation = this.props.variations.items.find(o => o.variation_id[0].value === varid);

                    variation.size = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_size[0].target_id);

                    sizes.push({value: variation.size.attribute_value_id[0].value, name: variation.size.name[0].value});
                    product.something.push(variation);

                    console.log(sizes);
                }
            }
        }
        return product;
    }


    render() {
        let style = {
            height: this.props.height - 56,
        };

        let product = this.getProduct();

        let body = product && product.body.length ? product.body[0].value : null;

        return (
            <div className="App" id="default">
                <div className='MenuBar'>
                    <MenuBar/>
                </div>
                <div>
                    <div style={style} className="ProductPage row no-gutters">
                        <div className="col-xs-3 col-md-3">
                            <LeftMenuBar/>
                        </div>
                        <div className="outer col-xs-4 col-md-4">
                            <div>
                                <div id="ProductPlacement">
                                  <img src={WomensWear} alt=""/>
                                    <div id="alternate-pics">
                                        <div id="alt-pic">
                                        </div>
                                        <div id="alt-pic">
                                        </div>
                                        <div id="alt-pic">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-xs-5 col-md-5">
                            <div id="ImagePlacement">
                                <div className="ProductTitle">
                                    <h1>First Product</h1>
                                </div>
                                <hr/>
                                <div className="ProductDescription">
                                    <div dangerouslySetInnerHTML={{__html: body}} />
                                </div>
                                <div id="options">
                                    <div id="color">
                                    </div>
                                    <div id="color2">
                                    </div>
                                    <div id="color3">
                                    </div>
                                </div>
                                <div id="options">
                                    <div>
                                        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                            <DropdownToggle caret id="size-dropdown">
                                                Size
                                            </DropdownToggle>
                                            <DropdownMenu>
                                                <DropdownItem>1</DropdownItem>
                                                <DropdownItem>3</DropdownItem>
                                                <DropdownItem>5</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                        <div className="AddToCart">
                                            <button className="AddToCart">Add To Cart</button>
                                            <button className="Price">$34.99</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductPage;

- Morgan Caldbeck

Answer 1

React的一个很棒的特点是你可以使用普通的JS。

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
   <DropdownToggle caret id="size-dropdown">
     Size
   </DropdownToggle>
   <DropdownMenu>
     {sizes.map(size => (
       <DropdownItem>{size}</DropdownItem>
     ))}
   </DropdownMenu>
</Dropdown>

附注：虽然元素更适合此操作，但这不是你的问题。

- Solo

---

啊，没问题，谢谢！不过你能给我演示一下如何使用select吗？如果更合适的话，我宁愿使用它。我尽量遵循最佳实践…… - Morgan Caldbeck

你想让用户可以选择一个尺寸，不是吗？ - Solo

我不熟悉这个库，但是这里似乎是查看的正确位置。您可以使用map与选择输入相同的方式。 - Solo

没错。我想你可以通过使用一个onClick函数来设置大小。 - Morgan Caldbeck

你可以使用onClick来实现，如果它的功能类似，那么选择select是传统的做法，但这是个人喜好的问题。 - Solo