FormControl 用于什么？为什么要使用它？应该如何使用？

Question

有人能用通俗易懂的语言解释一下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表单的新手。

谢谢。

- Cmaxster

---

相关答案：https://dev59.com/vFMI5IYBdhLWcg3wfbbN#56135272 - Ryan Cogswell

@RyanCogswell 这与此无关。您可以在没有FormControl的情况下同时使用Input和TextField。 - Phil

与 Angular Material 相比，我认为 MUI 的文档非常糟糕。一个简单的解释和示例就能避免很多困惑。我知道 MUI 开发人员没有像谷歌那样丰富的资源，但是基础知识应该都有吧。 - Phil

@Phil 我链接的答案与此相关，因为FormControl是由TextField渲染的较低级别组件之一，因此如果您正在使用TextField，则不需要显式使用FormControl。 - Ryan Cogswell

Answer 1

来自官方 Material UI 文档FormControl API：

为表单输入提供包括已填充/已聚焦/错误/必填等上下文信息。依赖于上下文提供了高度的灵活性，并确保状态始终在 FormControl 的子组件之间保持一致。以下组件使用此上下文：

• FormLabel
• FormHelperText
• Input
• InputLabel

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

- 4l12

---

是的，应该是“你应该将表单控件包裹在FormControl中”，而不仅仅是“你应该将整个表单包裹在FormControl中”，对吗？ - Derek Morrison

@DerekMorrison 没错，感谢更正。基本上，当您使用原生HTML表单组件时，您需要这个。否则，Material UI组件（如TextField）已经包含了表单控制组件。 - 4l12

“提供表单输入的上下文并保持一致性”是什么意思？这对我来说听起来非常抽象，你能举个具体的例子吗？ 意思是在表单中为每个输入字段提供清晰的标签、提示或说明，以帮助用户理解所需的信息，并确保这些标签和提示在整个表单中保持一致。例如，在一个注册表单中，为“用户名”、“电子邮件”和“密码”等输入字段提供明确的标签和要求，以便用户知道需要填写哪些信息。同时，在整个表单中使用相同的词汇和格式可以使用户更容易理解和快速填写表单。 - Plumpie

Plumpie，表单控件提供了一个可以被所有包装组件访问的公共上下文。请参阅https://mui.com/material-ui/react-text-field/#useformcontrol以获取更多详细信息。如果您不熟悉React上下文，请阅读此内容：https://reactjs.org/docs/context.html - Gal Zohar

那个医生很糟糕。 - Gustavo Maximo