FormControl 是做啥用的？为啥使用它？应该如何使用？

Posted 2023-02-22

【中文标题】FormControl 是做啥用的？为啥使用它？应该如何使用？

【英文标题】：What is FormControl used for? Why is it used? How Should it be used?FormControl 是做什么用的？为什么使用它？应该如何使用？

【发布时间】：2020-01-30 22:44:59

【问题描述】：

谁能用通俗的话向我解释一下 FormControl 的功能是什么，为什么/如何使用它？

我在 React 中使用 Material-UI，我看到的许多表单示例都使用了 FormControl，但我很难理解它的作用，以及它是否对我的项目有必要。

现在我只有一个名为 Form.js 的组件，我将所有表单元素包含在一个 div 中，如下所示：

return (
<div>
  <FormControl className=classes.formControl>
    <InputLabel htmlFor="select-multiple-accounts">Account</InputLabel>
    <Select
      multiple
      value=accountName
      onChange=handleAccountChange
      input=<Input id="select-multiple-accounts" />
      renderValue=
        selected => (
        <div className=classes.chips>
          
            selected.map(value => (
            <Chip key=value label=value className=classes.chip />
          ))
        </div>
      )
      MenuProps=MenuProps
    >
      accountNames.map(name => (
        <MenuItem key=name.label value=name.label style=getStyles(name.label, accountName, theme)>
          name.label
        </MenuItem>
      ))
    </Select>
  </FormControl>
  <br /><br />
  <TextField
    id="job-number"
    label="Job #"
    className=classes.textField
    value=props.jobNumber
    onChange=handleJobNumberChange
    fullWidth
  />
  <br /><br /><br />
  <TextField
    id="project-description"
    label="Project Description"
    placeholder="Provide a detailed description of the project:"
    className=classes.textField
    multiline
    variant="outlined"
    value=props.projectDescription
    onChange=handleProjectDescriptionChange
    fullWidth
  />
</div>
  );

这样好吗？还是我应该将所有内容都包装在 FormControl 中？如果是这样..你能解释一下为什么吗？我不确定将表单编码到 React Web 应用程序时的最佳实践是什么。我是 React Forms 的新手。

谢谢。

【问题讨论】：

相关答案：***.com/questions/56122219/…

@RyanCogswell 这根本不相关。您可以在没有 FormControl 的情况下同时使用 Input 和 TextField

与 Angular Material 相比，我发现 MUI 的文档非常糟糕。一个简单的解释和示例将避免如此多的混乱。我知道 MUI 开发人员没有 Google 那么多的资源，但是来吧，这些都是基础知识。

@Phil 我链接到的答案与FormControl 是TextField 呈现的较低级别组件之一有关，因此您不需要明确使用FormControl如果您使用的是TextField。

【参考方案1】：

来自官方 Material UI 文档FormControl API：

为表单输入提供上下文，例如 fill/focused/error/required。依赖上下文提供了高度的灵活性，并确保状态在 FormControl 的子项之间始终保持一致。此上下文由以下组件使用：

表单标签 FormHelperText 输入 输入标签

因此，如果您想使用上述功能，您应该将表单包装在 FormControl 组件中。

【讨论】：

应该是“您应该将表单控件包装在 FormControl 中”，而不仅仅是“您应该将 [整个] 表单包装在 FormControl 中”，对吧？

@DerekMorrison 完全正确，感谢您的更正。基本上，当您使用原生 HTML 表单组件时，您需要它。否则，TextField 等 Material UI 组件已经包含表单控件组件。