1. ホーム
  2. reactjs

[解決済み] マテリアルUIセレクトフィールドのマルチセレクト

2022-02-04 23:28:46

質問事項

ドキュメントに記載されている例を何度か試してみたのですが、うまくいきませんでした。 どなたか助けてください。 これはコードです。

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

state.valueをチェックすると、値の配列ではなく、1つの値しか含まれていません。

どうすればいいですか?

この例は、私にもうまくいきませんでした。マルチセレクト機能を追加するには、新しい値を手動でステートに追加する必要があるので、例にある handleChange 関数は次のようになります。

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

EDIT: 私のバージョンのmaterial-uiを最新の安定版に更新したら、彼らの例は魅力的に動作しました。