Material UI DropDown Menu 使用反应多选答案

【问题标题】：MaterialUI DropDownMenu Multiple select using reactMaterial UI DropDown Menu 使用反应多选
【发布时间】：2018-02-27 03:18:15
【问题描述】：

我正在尝试使用选项 multiple=true 让 DropDownMenu 工作

所以目前我的组件看起来像下面的代码。这很好用。

但现在我想启用多选

这是我在杂草中的一种。我喜欢一个简单的例子。

一些问题。

在创建 MenuItems 时，我假设这不会改变？
MenuItem 禁用条目怎么办
是一个数组的值。这是一个包含所有可能值的数组？

文档中提到了多个属性：

如果为真，值必须是一个数组，菜单将支持多个选择。

var options = this.props.optionsarray.map((o, i) => {
        return <MenuItem value={ o[this.props.optionsvaluename] } key={i} primaryText={ o[this.props.optionstextname] } />
    })

    return (
        <div className="t-input-container" >
            <div className="t-custom-input-container">
                <DropDownMenu
                    style={ !this.props.dropDownMenu ? {border: '1px solid #efefef'} : this.props.dropDownMenu }
                    selectedMenuItemStyle={ !this.props.selectedMenuItemStyle  ? {color: '#c31da3'} : this.props.selectedMenuItemStyle }
                    value={this.props.value}
                    multiple={this.props.multiple}
                    onChange={this.props.onChange}
                    underlineStyle={{left: -10}}
                    labelStyle={ !this.props.labelStyle ? {color: this.props.labelColor, fontWeight: 200} : this.props.labelStyle }
                    menuItemStyle={ !this.props.menuItemStyle ? {fontWeight: 100} : this.props.menuItemStyle }
                    autoWidth={true} >
                    <MenuItem disabled value={''} key={''} primaryText={this.props.defaultText} />
                    {options}
                </DropDownMenu>

            </div>
        </div>
    )

【问题讨论】：

那么你不是将多个作为 true 传递给组件吗？
在这个例子中我不是，但我试图让它与设置为 true 的属性一起工作，并且不确定我需要进行的所有更改
如果您只想选择一个值，那么 value={[this.props.value]} 除非值当然已经是一个数组。

标签： reactjs material-ui

【解决方案1】：

创建了一个允许多选的示例。

import React from 'react'
import { DropDownMenu, MenuItem } from "material-ui";
import { MuiThemeProvider, getMuiTheme } from 'material-ui/styles'
import {deepOrange500} from 'material-ui/styles/colors'

const styles = {
    customWidth: {
        width: 200,
    },
};

export default class DropDownMenuSimpleExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = { value: [1] };
        this.muiTheme = getMuiTheme({
            palette: {
                accent1Color: deepOrange500
            }
            , userAgent: props.userAgent
        })
    }

    handleChange (event, index, value)
    {
        debugger
        this.setState({ value })
};

    render() {
        return (

            <MuiThemeProvider muiTheme={this.muiTheme}>
                <div>
                    <DropDownMenu value={this.state.value} multiple={true} onChange={this.handleChange.bind(this)} >
                        <MenuItem value={1} primaryText="Never" />
                        <MenuItem value={2} primaryText="Every Night" />
                        <MenuItem value={3} primaryText="Weeknights" />
                        <MenuItem value={4} primaryText="Weekends" />
                        <MenuItem value={5} primaryText="Weekly" />
                    </DropDownMenu>
                    <br />

                </div>
            </MuiThemeProvider>


        );
    }
}

您可以使用相同的方式来支持您的方案。

首先是multiple={true}
接下来确保DropDownMenu 中的value={this.state.value} 是一个数组。（在上面的例子中，我把它变成了一个状态数组。）
然后在onChange事件中，再次将选中的值设置为state。

【讨论】：