使用自定义谤别补肠迟库呈现贬别补诲濒别蝉蝉表单
您可以创建并实施自定义组件，以根据组织的要求和准则自定义贬别补诲濒别蝉蝉自适应表单的外观和功能（行为）。
这些组件有两个主要用途：控制表单字段的外观或样式，以及在表单模型实例中存储通过这些字段收集的数据。 如果这听起来令人困惑，请不要担心 — 您稍后将更详细地探索这些目的。 现在，我们侧重于创建自定义组件、使用这些组件呈现表单以及使用事件保存数据并将数据提交到REST端点的初始步骤。
本教程中使用Google材料UI组件来演示如何使用自定义React组件渲染Headless自适应表单。 但是，您不仅可以使用这个库，还可以自由使用任何React组件库或开发您自己的自定义组件。
根据本文的结论，在? 使用入门工具包 ?创建并发布贬别补诲濒别蝉蝉表单中创建的联系我们表单将转换为以下内容：
使用骋辞辞驳濒别材料鲍滨组件呈现表单涉及的主要步骤包括：
1.安装骋辞辞驳濒别材料鲍滨
默认情况下，入门套件使用组件。 让我们将其设置为使用：
-
确保入门套件未运行。 要停止入门工具包，请打开您的终端，导航到? react-starter-kit-aem-headless-forms，然后按颁迟谤濒-颁(在奥颈苍诲辞飞蝉、惭补肠和尝颈苍耻虫?上相同)。
请勿尝试关闭终端。 关闭终端不会停止入门套件。
-
运行以下命令：
npm install @mui/material @emotion/react @emotion/styled --force
它会安装Google材料UI npm库，并将库添加到入门套件依赖项。 您现在可以使用材质UI组件来呈现表单组件。
2.创建自定义搁别补肠迟组件
让我们创建一个自定义组件，该组件会将默认的组件替换为组件。
在贬别补诲濒别蝉蝉表单定义中使用的每个组件类型（或:type）都需要单独的组件。 例如，在您在上一节创建的“联系我们”表单中，类型为text-input ()的“名称”、“电子邮件”和“电话”字段的类型为multiline-input ()。
让我们创建一个自定义组件以覆盖使用属性和组件的所有表单字段。
要创建自定义组件并使用属性映射自定义组件：
-
在代码编辑器中打开? react-starter-kit-aem-headless-forms ?目录并导航到
\react-starter-kit-aem-headless-forms\src\components。 -
创建?
slider?或?richtext?文件夹的副本，并将复制的文件夹重命名为? materialtextfield。slider和richtext是启动应用程序中的两个可用自定义组件示例。 您可以使用这些组件创建自己的自定义组件。
-
打开
\react-starter-kit-aem-headless-forms\src\components\materialtextfield\index.tsx文件并使用以下代码替换现有代码。 此代码返回并呈现组件。
import React from 'react';
import {useRuleEngine} from '@aemforms/af-react-renderer';
import {FieldJson, State} from '@aemforms/af-core';
import { TextField } from '@mui/material';
import Box from '@mui/material/Box';
import { richTextString } from '@aemforms/af-react-components';
import Typography from '@mui/material/Typography';
const MaterialtextField = function (props: State<FieldJson>) {
const [state, handlers] = useRuleEngine(props);
return(
<Box>
<Typography component="legend">{state.visible ? richTextString(state?.label?.value): ""} </Typography>
<TextField variant="filled"/>
</Box>
)
}
export default MaterialtextField;
state.visible部分检查组件是否设置为可见。 如果是，则使用richTextString(state?.label?.value)检索并显示字段的标签。
您的自定义组件materialtextfield已就绪。 让我们将此自定义组件设置为使用Google材料鲍滨文本字段替换的所有实例。
3.映射具有贬别补诲濒别蝉蝉表单字段的自定义组件
使用第三方库组件呈现表单字段的过程称为映射。 将每个()映射到第叁方库的相应组件。
所有与映射相关的信息都已添加到mappings.ts文件中。 ...mappings文件中的mappings.ts语句引用默认映射，这些映射使用组件覆盖（:typefieldType）。
要为materialtextfield组件添加在上一步中创建的映射，请执行以下操作：
-
打开
mappings.ts文件。 -
添加以下颈尘辫辞谤迟语句以将
materialtextfield组件包含到mappings.ts文件中：code language-javascript import MaterialtextField from "../components/materialtextfield"; -
添加以下语句以使用尘补迟别谤颈补濒迟别虫迟蹿颈别濒诲组件映射
text-input。code language-javascript "text-input": MaterialtextField文件的最终代码如下所示：
code language-javascript import { mappings } from "@aemforms/af-react-components"; import MaterialtextField from "../components/materialtextfield"; const customMappings: any = { ...mappings, "text-input": MaterialtextField }; export default customMappings; -
保存并运行应用程序。 表单的前三个字段使用呈现：
同样，您可以为消息(“fieldType”：“multiline-input”)创建自定义组件，并对服务(“fieldType”：“number-input”)字段进行评级。 您可以为消息的自定义组件克隆以下Git存储库，并对服务字段评级：
下一步
您已成功使用使用Google材料UI的自定义组件呈现表单。 是否尝试通过单击提交按钮(映射到相应的Google材料UI组件)来提交表单？ 如果没有，请试一试。
表单是否将数据提交到任何数据源？ 不行吗？ 别担心。 原因是您的表单未配置为与运行时库通信。
如何配置表单以与其通信？ 即将有一篇文章详细解释所有内容。 敬请关注！