FormControl的作用是什么?为什么使用它?应该如何使用? [英] What is FormControl used for? Why is it used? How Should it be used?

问题描述

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

Can someone explain to me in layman's terms what function FormControl serves, and why/how one would want to use it?

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

I'm using Material-UI in React, and many of the form examples I see make use of FormControl, but I'm having a hard time understanding what it does, and if it's necessary or not for my project.

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

Right now I simply have a Component named Form.js and I'm containing all my form elements in a div like this:

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的新手.

Is this ok? or am I supposed to be wrapping everything in a FormControl? If so.. can you please explain why? I'm not sure what the best practices are when coding a form into a React web application. I'm new to React Forms.

谢谢.

推荐答案

摘自官方Material UI文档

From the official Material UI Documentation FormControl API:

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

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:

• FormLabel
• FormHelperText
• 输入
• InputLabel

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

So if you want to use the mentioned features, you should wrap your form in a FormControl component.

这篇关于FormControl的作用是什么?为什么使用它?应该如何使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！