reactjs - 如何在正确 react 中使用 Material ui 构建表单

Question

我对 Material ui 中的不同表单组件感到困惑。

有六个组件与不包含特定输入字段的表单相关:
- 表单控件
- 表格标签
- 表单控件标签
- 表单组
- 输入标签
- FormHelperText

当您查看他们的示例时 Signin和 Signup在顶部添加了一个普通的 html 表单标签。

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

Answer 1

M-UI 文档一开始可能很难解析。如果您转到文档中输入/表单 API 的演示部分，您可以单击展开代码图标 <> 并查看其代码的展开版本以获得更好的上下文。
对于简单的表单，您可以使用基本的 HTML/JSX 表单标签并在那里设置您的 onSubmit 属性，并将 M-UI 组件 TextField 作为您在包围表单标签内的输入。然后，您可以为每个 TextField 定位名称/值属性。
这将使您熟悉 TextField 的 API，它是 M-UI 输入组件中最基本的。从那里开始，当您需要接触诸如 FormControls 和标签之类的组件时，它会变得更加明显。