材质 UI 选择字段多选答案

【问题标题】：Material UI Select Field multiselect材质 UI 选择字段多选
【发布时间】：2017-11-15 23:19:41
【问题描述】：

我多次尝试文档中给出的示例。但这对我来说效果不佳。谁能帮我.... 这是代码

import React, {Component} from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

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

/**
 * `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
 */
export default class SelectFieldExampleMultiSelect extends Component {
  state = {
    values: [],
  };

  handleChange = (event, index, values) => this.setState({values});

  menuItems(values) {
    return names.map((name) => (
      <MenuItem
        key={name}
        insetChildren={true}
        checked={values && values.indexOf(name) > -1}
        value={name}
        primaryText={name}
      />
    ));
  }

  render() {
    const {values} = this.state;
    return (
      <SelectField
        multiple={true}
        hintText="Select a name"
        value={values}
        onChange={this.handleChange}
      >
        {this.menuItems(values)}
      </SelectField>
    );
  }
}

http://www.material-ui.com/#/components/select-field

select 属性有效，但它不选择多个选项。当我检查 states.value 时，它只包含一个值而不是值数组

【问题讨论】：

您可以使用另一个数组并将您的值推入其中。
是的，但是如果它支持多选，它应该提供一个数组不是吗...所以我去了另一个插件，它对我有用，谢谢你的想法. [npmjs.com/package/react-select-2][1]:npmjs.com/package/react-select-2
是的，你可以使用 react multiselect .. 这是更好的选择
yha 它对我来说很好，,,,thanx mate....我建议其他人选择多选...

标签： reactjs material-ui

【解决方案1】：

这个例子也不适合我。要添加多选功能，您必须手动将新值添加到状态，因此示例中的 handleChange 函数如下所示：

  handleChange(event, index, values)  { 
    this.setState({ 
     values: [...this.state.values , values]
    });
   }

编辑：我将我的 material-ui 版本更新为最新的稳定版本，他们的示例就像一个魅力

【讨论】：

谢谢你的兄弟，我们可以这样做......但我正在寻找为什么 multiselct 功能不起作用......无论如何还是谢谢
所以我实际上发现了为什么它不起作用@SalindaKrish。您必须将您的材料 UI 版本更新为最新的“稳定”版本。我升级了，安装了 npm，然后它就像一个魅力
嗯 ,, 可能是原因 ,,thanx @Sua Morales

【解决方案2】：

可能有更好的方法。在 Material UI 的最新版本中。

import Select from '@material-ui/core/Select';
import MenuText from '@material-ui/core/MenuText';
import {useState} from 'react';

const App = () => {
   const [selected,setSelected] = useState([]); 
   return <Select multiple={true} value={selected} onChange={(event) => setSelected(event.target.value)}>
   <MenuItem>Val - 1</MenuItem>
   <MenuItem>Val - 2</MenuItem>
   <MenuItem>Val - 3</MenuItem>
   <MenuItem>Val - 4</MenuItem>
</Select> 
}

确保将 select 的值设置为数组。否则，它将不起作用

【讨论】：