素材ui selectFiledマルチセレクトデフォルト値が複数の値に分割されていた

Question

私は複数の選択項目を実装しました。複数の選択値に問題があります。つまり、値が "hai"値が "hello"だったドロップダウンリストから、デフォルト値と選択された値を['h'、 'a'、 'i'、 'hello']のような配列として分割して値を取得しています。 [hai]、[hello]などの2つの要素から構成されています。何が間違っているかわからない。あなたが「はい」であることを<Selectfield>コンポーネント上valueプロパティをハードコーディングされてきた以下のコードスニペットに

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

を見つけてください。したがって、「hai」がmenuItems関数を通過するとき、menuItems関数はmapを呼び出し、h、a、iを繰り返します。ハードコードされた値のプロパティを削除し、コンポーネントの状態の値で置き換えます。