我对材料ui中不同的表单组件感到困惑。
与表单相关的六个组件不包含特定的输入字段:
-FormControl
-FormLabel
-FormControlLabel
-FormGroup
-InputLabel
-FormHelperText
查看他们的示例Signin和Signup时,会在顶部添加一个普通的html表单标记。
有人可以解释何时使用什么组件正确构建表单吗?
答案 0 :(得分:2)
M-UI 文档起初可能难以解析。如果您转到文档中输入/表单 API 的演示部分,您可以单击展开代码图标 <> 并查看其代码的展开版本以获得更好的上下文。
对于简单的表单,您可以使用基本的 HTML/JSX 表单标签并在那里设置您的 onSubmit 属性,并将 M-UI 组件 TextField 作为您在包围表单标签内的输入。然后,您可以为每个 TextField 定位名称/值属性。
这会让您熟悉 TextField 的 API,它是最基本的 M-UI 输入组件。当您需要使用 FormControls 和标签等组件时,这将变得更加明显。
答案 1 :(得分:0)
我最近发现了这个 [codesanbox]: https://codesandbox.io/s/9ywq085k9w,它是由最常用的输入字段类型组成的表单的一个很好的例子。它还包含一个验证方法。