Reactjs 如何在react中使用物料ui构建表单

我对MaterialUI中的不同表单组件感到困惑

有六个组件与不包含特定输入字段的表单相关：
-FormControl
-FormLabel
-FormControlLabel
-FormGroup
-输入标签
-FormHelperText

当您查看他们的示例时，会在顶部添加一个简单的html表单标记

---

有人能解释一下什么时候使用什么组件来正确构建表单吗

一开始很难解析M-UI文档。如果您转到API的演示部分以获取文档中的输入/表单，您可以单击展开代码图标并查看其代码的展开版本以获得更好的上下文

对于简单表单，您可以使用一个基本的HTML/JSX表单标记，在那里设置onSubmit属性，并将M-UI组件文本字段作为信封表单标记中的输入。然后，可以针对每个文本字段的名称/值属性

---

这将使您熟悉最基本的M-UI输入组件API for TextField。从这里开始，当您需要使用表单控件和标签等组件时，它将变得更加明显。

我最近发现了这个[codesanbox]：它是由最常用的输入字段类型组成的表单的一个很好的示例。它还包括一种验证方法。

在材料用户界面文档中有一些示例，说明了这些方法的使用位置和原因。感谢您的回答。遗憾的是，示例中没有任何注释。这就是为什么很难理解为什么和如何。此外，这些示例也不一致。您是否阅读了“组件API”部分中对每个示例的描述？您提到的一些组件用于更好、一致的布局和样式。有些将样式和定位（以及其他css）应用于原始html元素，例如

。在查看示例的同时，在沙箱中尝试它们。请看material ui的问题在于，不清楚如何正确排列表单中的元素。在bootstrap中花了我15分钟的东西在Material ui中花了我几天的时间