[解決済み] マテリアル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を最新の安定版に更新したら、彼らの例は魅力的に動作しました。
関連
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] ReactJS で inst.render が関数でないエラーが発生する
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
-
[解決済み] React JSX: selecting "selected" on selected <select> option
-
[解決済み] MakeStyles を使用してコンポーネントのスタイルを設定し、マテリアル UI のライフサイクル メソッドを維持するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?
-
[解決済み] React」は定義される前に使用されていた