材质UI多重选择|如何在加载时显示所选项目

Question

我在Material-ui-next使用多选筹码类型。以下是我的自定义代码：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import { FormControl } from 'material-ui/Form';
import { ListItemText } from 'material-ui/List';
import Select from 'material-ui/Select';
import Checkbox from 'material-ui/Checkbox';
import Chip from 'material-ui/Chip';

import _ from 'lodash';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },

  formControl: {
    margin: theme.spacing.unit ,
    minWidth: 120,
    maxWidth: 300,
    marginTop : 0,
  },

  chips: {
    display: 'flex',
    flexWrap: 'wrap',
  },

  chip: {
    margin: theme.spacing.unit / 4,
  },

});

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

/*const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder',
];*/


class MultipleSelect extends React.Component {

  constructor(props){
    super(props);

      var result = [{
            "id": 1,
            "code": "01",
            "name_en": "1st Time Visit",
        },
        {
            "id": 2,
            "code": "02",
            "name_en": "Teeth Cleaning",
        }];


    this.state = {
      name : result
    };

  }

  handleChange = event => {

    this.setState({ name : event.target.value  });

    this.props.onServicesChange(event.target.value );

  };

  render() {



    if(!this.props.services)
      return (<div>Loading ...</div>)



    const { classes, theme } = this.props;


    return (

      <div className={classes.root}>       

        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="select-multiple-chip">Services</InputLabel>
          <Select
            multiple
            value={this.state.name }
            onChange={this.handleChange}
            input={<Input id="select-multiple-chip" />}
            renderValue={selected => (
              <div className={classes.chips }>
                  {selected.map(value =>   
                    <Chip 
                      key={value.id  } 
                      label={ [value.code,' ',value.name_en] } 
                      className={classes.chip} 
                    />)}
              </div>
            )}
            MenuProps={MenuProps}
          >

            {this.props.services.map(service => (   //names.map   //name
              <MenuItem
                key={service.id } //name
                value={service} //name
                style={{
                  fontWeight:
                     this.state.name.indexOf(service.name_en  ) === -1 // name
                      ? theme.typography.fontWeightRegular
                      : theme.typography.fontWeightMedium,
                }}
              >
                {[service.code,' ', service.name_en]} {/*name*/}
              </MenuItem> 
            ))}
          </Select>
        </FormControl>
      </div>
    );
  }
}

MultipleSelect.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(MultipleSelect);

我可以在<Select>筹码区域上将所选项目显示为已选择，并将name state的对象数组分配给我的自定义上面的代码。但我遇到的问题是，单击时<MenuItem>选中的项目与选中的项目相同。

我的尝试如下：

      <MenuItem
        key={service.id /*, console.log(this.state.name.indexOf(service.name_en))  */} //name
        value={service} //name
        style={{
              fontWeight:
              _.find(this.state.name,function(o){ return o.id === service.id })
              ? theme.typography.fontWeightMedium
              : theme.typography.fontWeightRegular,
          /*fontWeight:
             this.state.name.indexOf(service.name_en  ) === -1 // name
              ? theme.typography.fontWeightRegular
              : theme.typography.fontWeightMedium,
         */

        }}
      >
        {[service.code,' ', service.name_en]} {/*name*/}
      </MenuItem> 

上面的代码可以使加载时的给定项目为fontWeightMeduim，但不能使用灰色背景。第二个问题是，当点击另一个项目时，该项目似乎是fontWeightMeduim并带有灰色背景。所以，我无法保持一致性。请帮助我实现这一目标。

作为参考，多选芯片类型的原始代码如下：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import { FormControl } from 'material-ui/Form';
import { ListItemText } from 'material-ui/List';
import Select from 'material-ui/Select';
import Checkbox from 'material-ui/Checkbox';
import Chip from 'material-ui/Chip';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120,
    maxWidth: 300,
  },
  chips: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  chip: {
    margin: theme.spacing.unit / 4,
  },
});

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder',
];

class MultipleSelect extends React.Component {
  state = {
    name: [],
  };

  handleChange = event => {
    this.setState({ name: event.target.value });
  };

  render() {
    const { classes, theme } = this.props;

    return (
      <div className={classes.root}>


        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
          <Select
            multiple
            value={this.state.name}
            onChange={this.handleChange}
            input={<Input id="select-multiple-chip" />}
            renderValue={selected => (
              <div className={classes.chips}>
                {selected.map(value => <Chip key={value} label={value} className={classes.chip} />)}
              </div>
            )}
            MenuProps={MenuProps}
          >
            {names.map(name => (
              <MenuItem
                key={name}
                value={name}
                style={{
                  fontWeight:
                    this.state.name.indexOf(name) === -1
                      ? theme.typography.fontWeightRegular
                      : theme.typography.fontWeightMedium,
                }}
              >
                {name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
    );
  }
}

MultipleSelect.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(MultipleSelect);

并在CodeSandBox上，您可以使用原始代码。