Question

有人可以用通俗易懂的方式向我解释FormControl的功能，以及为什么/如何使用它吗？

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

现在，我只拥有一个名为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：

为表单输入提供诸如填充/重点/错误/必填之类的上下文。依靠上下文可提供高度的灵活性，并确保状态在FormControl的所有子代之间始终保持一致。此上下文由以下组件使用：

FormLabel
FormHelperText
输入
InputLabel

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

FormControl的作用是什么？为什么使用它？应该如何使用？

1 个答案: