我多次尝试了文档中给出的示例。但它对我来说效果不佳。 谁能帮我.... 这是代码
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 时,它只包含单个值而不是值数组
最佳答案
这个例子对我来说也不起作用。要添加多选功能,您必须手动将新值添加到状态,因此示例中的 handleChange 函数将如下所示:
handleChange(event, index, values) {
this.setState({
values: [...this.state.values , values]
});
}
编辑:我将 Material-ui 版本更新到最新的稳定版本,他们的示例非常有效
关于reactjs - Material UI 选择字段多选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44534034/