在Material-ui中，何时使用输入与文本字段来构建表单？

Question

也许这只是一个基本问题，但到目前为止尚未找到任何合理的解释。我是最近刚开始使用React和Material-UI的初学者。我不清楚何时使用输入与文本字段构建表单？

查看文档，感觉TextField是Input可以做的事情的超集，但不确定。Material-ui站点在文本字段和输入示例中都使用了示例，而没有说明一个相对于另一个以及任何用例的好处。

请提出建议。

Answer 1

TextField这是组件的简化定义：

<FormControl {...other}>
  {label && (
    <InputLabel {...InputLabelProps}>
      {label}
    </InputLabel>
  )}

  {select ? (
    <Select {...SelectProps}>
      {children}
    </Select>
  ) : (
    <Input {...InputProps} />
  )}

  {helperText && (
    <FormHelperText {...FormHelperTextProps}>
      {helperText}
    </FormHelperText>
  )}
</FormControl>

正如您所看到的，TextField不仅仅是Input，它包括：

• FormControl：它只是一个上下文提供程序，用于将TextField状态（焦点、错误、悬停...）传递给子级并确保它们保持一致。您通常不必直接使用该组件。

• InputLabelTextField： ,的标签Input本身没有标签，因此如果您想向 , 中添加标签Input，请使用TextField.

• FormHelperText：放置在 下方的帮助文本Input，用于描述TextField或显示表单验证中的一些错误消息。

• Input：输入本身。实际上有 3 个不同变体的输入组件：Input，OutlinedInput并且可以通过中的propFilledInput设置。这是使用 的另一个原因，您无需查找和导入不同的输入组件，只需设置variant 属性即可知道要渲染什么。variantTextFieldTextFieldTextField

• Select:TextField可以是 aSelect或Input。设置select属性以更改要选择的输入类型。

那么什么时候使用TextField呢？在您想要显示Input带有标签的表单中，并且有办法在干净的 API 中设置错误消息，这在大多数情况下都是如此。

什么时候使用Input？当您除了需要输入的内容之外不需要上述所有内容时，或者当您需要极端定制并且 API不足以满足TextField您的需求时。

Answer 2

对于大多数用例，您应该使用TextField而不是它委派给的下级组件（例如Input）。

文档的相关部分位于：https : //material-ui.com/demos/text-fields/#components。

特别是这一行：

TextField由较小的组件（FormControl，Input，FilledInput，InputLabel，OutlinedInput和FormHelperText）组成，您可以直接利用它们来显着自定义表单输入。

使用这些下层组件的主要原因是，您是否需要使用所不支持的某种方式来自定义表单输入TextField。