FormControl 是用来做什么的？为什么使用它？应该如何使用呢？

有人可以用外行的术语向我解释 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 的新手。

Thanks.

来自官方 Material UI 文档表单控制API https://material-ui.com/api/form-control/:

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

• 表单标签
• 表单辅助文本
• Input
• 输入标签

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