Reactjs 如何使用React和Typescript获得最简单的材质UI选择？

我正在尝试获取最简单的材质UI

Select

，以使用React with Typescript。我花了三个小时搜索一个示例，该示例演示了如何设置标签或占位符（我检查了API的所有属性，这些是唯一有意义的属性）

这里根本没有演示、示例、教程、指南、文章、文档页面来组合外观和代码。10亿页，其中大部分是极其复杂的代码示例，但只有代码。还有10亿页的演示和图片。您有机会创建第一个有用的说明如何使用材料界面

选择

情况很简单：我的代码是

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")
)

从“React”导入React
从“react dom”导入react dom
从“@material ui/core/Select”导入MuiSelect
从“@material ui/core/MenuItem”导入MuiMenuItem
类MyComponent扩展了React.Component

从

电流输出为

尽可能简单

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;
};

从“React”导入React；
从“@material ui/core/Select”导入MuiSelect；
从“@material ui/core/MenuItem”导入MuiMenuItem；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core”导入{FormControl}”；
类MyComponent扩展了React.Component
所有演示都有与之关联的代码。单击演示下面的
显示代码，或单击铅笔在代码沙盒中编辑代码。使用标签进行选择的最简单方法是使用。标签没有以这种方式正确放置（与TextField不同，这看起来非常不方便）。我怀疑在单独的组件中指定标签是正确的方法。我假设它增加了复杂性，这正好说明了我在问题中描述的示例的问题。不存在显示材质组件使用的简单示例。谢谢你的解释和回答。公平地说，我没有投票。我去掉了“正确答案”标记，因为框架太令人失望了。许多人大肆宣传的React和material UI最终证明需要这组代码来实现一个我期望在任何值得关注的框架中都可以在一个oneliner中解决的东西。我必须回到JSF吗？我会给你一个“正确的答案”，因为你的意图是好的，而且答案准确地回答了我的问题。