Question

我已经实现了材料-ui多个选择，我遇到了多个选择值的问题，这意味着我有一个默认选择，其值为“hai”，当使用从下拉列表中选择另一个项目，其值为“hello”时通过将默认值和选定值分割为['h'，'a'，'i'，'hello']这样的数组得到的值，它假设是两个元素的数组，如''hai'，'hello' ]。不确定是什么问题。请找到以下代码段

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

const names = [
  'hai',
  'hello',
  'how are you',
  ];


export default class SelectFieldMultiSelect extends Component {


  handleChange = (event, index, values) {
    console.log(values);
  }


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

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

Answer 1

您已将value组件上的<Selectfield>属性硬编码为“hai”。因此，当“hai”通过menuItems函数时，menuItems函数调用map并迭代h，然后a，然后i。删除硬编码的value属性，并替换为组件状态的某个值。

材料ui selectFiled多选默认值分为多个值

1 个答案: