如何在正确反应中使用材料 ui 构建表单

siv*_*iva 13 reactjs material-ui

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

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

当您查看他们的示例SigninSignup 时,会在顶部添加一个纯 html 表单标签。

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

Jon*_*ers 2

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

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

这将使您熟悉 TextField 的 API,这是最基本的 M-UI 输入组件。从那里,当您需要使用 FormControls 和标签等组件时,它会变得更加明显。