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 Forms 的新手。

谢谢。

Answer 1

来自官方 Material UI 文档FormControl API：

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

• 表单标签
• FormHelperText
• 输入
• 输入标签

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