Material UI选择字段多选

我尝试了几次文档中给出的示例。但对我来说效果并不好。任何一个可以帮助我.... 这是代码Material UI选择字段多选

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

选择物业的作品，但它不选择多个选项。当我检查states.value它只包括一个单一的值，而不是一组数值

来源

2017-06-14 SalindaKrish

你可以采取另一个数组，并推入你的价值。 –

是的，但如果它支持多选择它应该提供一个数组不是它......所以我去了另一个插件，它为我工作,,,谢谢你的想法。 [https://www.npmjs.com/package/react-select-2] [1]：https：//www.npmjs.com/package/react-select-2 – SalindaKrish

是的，您可以使用反应多选。。它是更好的选择 –

这个例子也没有为我工作。要添加您需要手动添加新值状态的多选功能，因此从例子中handleChange功能会是这个样子：

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

编辑：我更新了我的版材的UI来最新的稳定版本和他们的例子像一个魅力

来源

2017-07-25 15:22:35

谢谢兄弟，亚哈我们可以这样做...但我一直在寻找为什么那里multiselct功能上没有工作... thanx无论如何 – SalindaKrish

所以我实际上发现它为什么没有工作@SalindaKrish。您必须将您的材料用户界面版本更新为最新的“稳定”版本。我升级了，做了一个npm安装，然后它像一个魅力工作 –

嗯，可能是这可能是一个原因,, thanx @Sua Morales – SalindaKrish

Material UI选择字段多选

回答

相关问题