Как получить самый простой Material UI Select для работы с React и Typescript?

Question

Я пытаюсь заставить простейший пользовательский интерфейс Select работать в React с Typescript. Я трачу три часа на поиск примера, который показывает, как установить метку или заполнитель (я проверил все свойства API, и только они имеют смысл).

Там просто нет демонстрации, например, учебник, инструкции, статья, страница документации, которая объединяет внешний вид и код. Миллиард страниц с в основном чрезвычайно сложными примерами кода, но только с кодом. И миллиард страниц с демонстрациями и изображениями. Ваш шанс создать первое полезное объяснение, как использовать Материал UI Select!

Ситуация проста: мой код:

import React from "react"
import ReactDOM from "react-dom"
import MuiSelect from '@material-ui/core/Select'
import MuiMenuItem from '@material-ui/core/MenuItem'

class MyComponent extends React.Component<any, MyComponentState> {

  constructor(props: any) {
    super(props);
    this.state = {selectedAge: ""}
  }

  render() {
    return <div className="container">
      <MuiSelect id="offerType" label="Age" placeholder="Age" variant="outlined" value={this.state.selectedAge}>
        <MuiMenuItem value="1"/>
      </MuiSelect>
    </div>
  }
}

type MyComponentState = {
  selectedAge: string;
}

ReactDOM.render(
  <MyComponent/>,
  document.getElementById("root")
)

Ожидаемый результат - из этих

с https://material-ui.com/components/selects/

А токовый выход составляет

Answer 1

Так просто, как я мог это сделать

import React from "react";
import MuiSelect from "@material-ui/core/Select";
import MuiMenuItem from "@material-ui/core/MenuItem";
import InputLabel from "@material-ui/core/InputLabel";
import { FormControl } from "@material-ui/core";


class MyComponent extends React.Component<any, MyComponentState> {
  constructor(props: any) {
    super(props);
    this.state = { selectedAge: "" };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(evt: React.ChangeEvent<HTMLSelectElement>) {
    this.setState({ selectedAge: evt.target.value });
  }

  render() {
    return (
      <FormControl>
        <InputLabel id="age">Age</InputLabel>
        <MuiSelect
          onChange={this.handleChange}
          labelId="age"
          value={this.state.selectedAge}
          style={{width: '13em'}}
        >
          <MuiMenuItem value="1">1</MuiMenuItem>
          <MuiMenuItem value="2">2</MuiMenuItem>
        </MuiSelect>
      </FormControl>
    );
  }
}

type MyComponentState = {
  selectedAge: string;
};

Вы можете проверить это на codesandbox