在 MUI 中，我们何时使用 Input 与 TextField 来构建表单？

Question

也许这只是一个基本的问题，但到目前为止还没有找到任何合理的解释。我是 React 的初学者，最近才开始使用 MUI。我不太清楚什么时候使用 Input 与 Textfield 来构建表单？

查看文档，感觉 TextField 是 Input 可以做的事情的超集，但不确定。 MUI 站点使用了 TextField 和 Input 的示例，但没有说明两者的优势和任何用例。

求推荐。

Answer 1

对于大多数用例，您应该使用 TextField 而不是它委托给的 lower-level 组件（例如 Input）。

文档的相关部分是 here。

特别是这一行：

TextField is composed of smaller components ( FormControl, Input, FilledInput, InputLabel, OutlinedInput, and FormHelperText ) that you can leverage directly to significantly customize your form inputs.

使用这些 lower-level 组件的主要原因是如果您需要以某种不支持使用 TextField 的方式自定义您的表单输入。

Answer 2

这是TextField component的简化定义：

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

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

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

如您所见，TextField 不仅仅是一个 Input，它包括：

FormControl: It's just a context provider 用于将 TextField 状态（焦点、错误、悬停...）传递给子项并确保它们保持一致。您通常不必直接使用此组件。
InputLabel：TextField的标签，Input本身没有，所以如果你想给你的标签加标签Input, 使用 TextField.
FormHelperText：位于Input下方的帮助文本，用于描述TextField或在表单验证中显示一些错误信息。
Input：输入本身。实际上有 3 个不同变体的输入组件：Input、OutlinedInput 和 FilledInput，可以通过 TextField 中的 variant prop 设置。这是使用 TextField 的另一个原因，而不是查找和导入不同的输入组件，您只需设置 variant 属性，TextField 就会知道要渲染什么。
Select：TextField 可以是 Select 或 Input。设置 select prop 将输入类型更改为 select。

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

什么时候使用Input？当您不需要上述所有内容时，除了需要输入的内容，或者当您需要极端的自定义并且 TextField 的 API 对您来说还不够时。

在 MUI 中，我们何时使用 Input 与 TextField 来构建表单？

In MUI when do we use Input vs. TextField for building a form?

input

textfield

reactjs

material-ui