表单控件

表单控件组件是一个实用工具，可让您将表单输入框与辅助组件（例如标签、错误指示器或辅助文本）相关联。

简介

表单控件是一个实用程序，它将输入组件与其他关联组件包装在一起，以便使输入的状态可供这些组件使用。

例如，如果输入为空，您可能希望显示一个额外的元素，要求用户输入值；如果输入的值不正确，则显示警告图标。

组件

import { FormControl } from '@mui/base/FormControl';

表单控件包装了表单中需要访问 <input> 状态的元素。例如，如果表单的提交按钮需要在用户输入信息后更改状态，则组件的结构将如下所示

<FormControl>
  <input>
  <button>Submit</button>
</FormControl>

以下演示展示了如何创建和样式化一个表单，该表单使用表单控件来包装表单的元素。请注意，它还使用了 useFormControlContext Hook，以便将 props 传递给自定义 Input—有关更多详细信息，请参见下面的 Hook 部分。

与 TypeScript 一起使用

在 TypeScript 中，您可以将 slots.root 中使用的自定义组件类型指定为非样式化组件的泛型参数。这样，您可以安全地直接在组件上提供自定义 root 的 props

<FormControl<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

这同样适用于特定于自定义原始元素的 props

<FormControl<'button'> slots={{ root: 'button' }} onClick={() => {}} />

Hook

import { useFormControlContext } from '@mui/base/FormControl';

useFormControlContext Hook 读取表单控件提供的上下文。此 Hook 使您可以在表单控件内部使用自定义输入组件。您还可以使用它来读取表单控件的状态，并对自定义组件中的状态更改做出反应。

Hook *不支持* 插槽 props，但它们*支持* 自定义 props。

下面的演示展示了如何将此 Hook 与其组件对应项集成

• CustomInput 是原生 HTML <input> 的包装器，它添加了表单控件集成。
• ControlStateDisplay 读取表单控件的状态，并将其显示为文本。

请注意，即使表单控件同时支持受控和非受控样式的 API（即它接受 value 和 defaultValue props），useFormControlContext 也仅返回受控的 value。这样，您不必在自定义输入中同时实现两者—表单控件会为您执行此操作。

自定义

访问表单控件状态

您可以通过提供一个函数作为子元素来访问表单控件的状态。状态将作为参数提供给此函数。

以下演示展示了如何在嵌套在内部的 Input 组件中访问表单控件的状态