La boîte de sélection de material-ui n'affiche pas la sélection

Question

J'ai une boîte de sélection material-ui qui est remplie avec une variable d'état. Peu importe ce que j'ai essayé, je n'arrive pas à faire en sorte que la valeur s'affiche lorsque je sélectionne une option. Quelqu'un peut-il me dire pourquoi ? Je n'arrive qu'à obtenir une barre blanche. J'ai même pris un exemple dans un autre bac à sable et je l'ai copié presque exactement. Une chose que j'ai remarquée, c'est que mon event.target.value est toujours indéfini, et je ne sais pas trop pourquoi. J'utilise donc la valeur à la place dans ma fonction handleChange. Toute aide est grandement appréciée ! Cela m'a rendu fou.

Bac à sable du code : https://codesandbox.io/s/jnyq16279v

Code :

import React from 'react';
import MenuItem from 'material-ui/MenuItem';
import Select from 'material-ui/SelectField';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

export default class KKSelect extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectOptions: [
                {
                    value: "Image",
                    id: "1"
                },
                {
                    value: "Integer",
                    id: "2"
                },
                {
                    value: "Decimal",
                    id: "3"
                },
                {
                    value: "Boolean",
                    id: "4"
                },
                {
                    value: "Text",
                    id: "5"
                }
            ],
            selectedValue: ""
        };
    }

    renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

    handleChange = (event, value) => {
        this.setState({ selectedValue: value });
    };

    render() {
        return (
            <MuiThemeProvider>

                <Select
                    value={this.state.selectedValue}
                    onChange={this.handleChange}
                >
                    {this.renderSelectOptions()}
                </Select>

            </MuiThemeProvider>
        );
    }
}

Answer 1

Tout d'abord, vous utilisez la version 0.20.1 de material-ui - la documentation pour cette version est ici : https://v0.material-ui.com/#/components/select-field mais il est recommandé d'utiliser v1 ( https://material-ui.com/getting-started/installation/ ).

Pour la version 0.20.1, il y a quelques problèmes avec votre code :

Premièrement : renderSelectOptions : {dt.value} doit être assigné à l'élément de menu primaryText

renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

comme ceci :

renderSelectOptions = () => {
    return this.state.selectOptions.map((dt, i) => (
      <MenuItem key={dt.id} value={dt.id} primaryText={dt.value} />
    ));
  };

Deuxièmement, le handle change a des arguments event, index et value, donc votre valeur est en fait l'index - et non la valeur.

handleChange = (event, value) => {
    this.setState({ selectedValue: value });
};

Il devrait l'être :

  handleChange = (event, index, value) => {
    this.setState({ selectedValue: value });
  };

Consultez la version de travail pour material-ui version 0.20.1 ici : https://codesandbox.io/s/9q3v1746jy

P.S. Si vous utilisez la version 1.2.1 de material-ui, j'ai créé un exemple de travail pour cette version également, vous pouvez le consulter ici : https://codesandbox.io/s/jjvrnokkv3