跳到内容 Shopify标志北极星

形式

处理表单提交的包装器组件。

使用onSubmit作为表单提交时的回调函数。

进口<跨度class="token punctuation">{形式<跨度class="token punctuation">，FormLayout<跨度class="token punctuation">，复选框<跨度class="token punctuation">，文本框<跨度class="token punctuation">，按钮<跨度class="token punctuation">}<跨度class="token keyword">从<跨度class="token string">“@shopify /北极星”<跨度class="token punctuation">；<跨度class="token keyword">进口<跨度class="token punctuation">{useState<跨度class="token punctuation">，useCallback<跨度class="token punctuation">}<跨度class="token keyword">从<跨度class="token string">“反应”<跨度class="token punctuation">；<跨度class="token keyword">函数<跨度class="token function">FormOnSubmitExample<跨度class="token punctuation">（<跨度class="token punctuation">）<跨度class="token punctuation">{<跨度class="token keyword">常量<跨度class="token punctuation">［通讯<跨度class="token punctuation">，setNewsletter<跨度class="token punctuation">]<跨度class="token operator">=<跨度class="token function">useState<跨度class="token punctuation">（<跨度class="token boolean">假<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token keyword">常量<跨度class="token punctuation">［电子邮件<跨度class="token punctuation">，setEmail<跨度class="token punctuation">]<跨度class="token operator">=<跨度class="token function">useState<跨度class="token punctuation">（<跨度class="token string">”<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token keyword">常量handleSubmit<跨度class="token operator">=<跨度class="token function">useCallback<跨度class="token punctuation">（<跨度class="token punctuation">（<跨度class="token parameter">_event<跨度class="token punctuation">）<跨度class="token operator">=＞<跨度class="token punctuation">{<跨度class="token function">setEmail<跨度class="token punctuation">（<跨度class="token string">”<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token function">setNewsletter<跨度class="token punctuation">（<跨度class="token boolean">假<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token punctuation">}<跨度class="token punctuation">，<跨度class="token punctuation">［<跨度class="token punctuation">]<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token keyword">常量handleNewsLetterChange<跨度class="token operator">=<跨度class="token function">useCallback<跨度class="token punctuation">（<跨度class="token punctuation">（<跨度class="token parameter">价值<跨度class="token punctuation">）<跨度class="token operator">=＞<跨度class="token function">setNewsletter<跨度class="token punctuation">（价值<跨度class="token punctuation">）<跨度class="token punctuation">，<跨度class="token punctuation">［<跨度class="token punctuation">]<跨度class="token punctuation">，<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token keyword">常量handleEmailChange<跨度class="token operator">=<跨度class="token function">useCallback<跨度class="token punctuation">（<跨度class="token punctuation">（<跨度class="token parameter">价值<跨度class="token punctuation">）<跨度class="token operator">=＞<跨度class="token function">setEmail<跨度class="token punctuation">（价值<跨度class="token punctuation">）<跨度class="token punctuation">，<跨度class="token punctuation">［<跨度class="token punctuation">]<跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token keyword">返回<跨度class="token punctuation">（<跨度class="token operator"><形式onSubmit<跨度class="token operator">=<跨度class="token punctuation">{handleSubmit<跨度class="token punctuation">}<跨度class="token operator">><跨度class="token operator"><FormLayout<跨度class="token operator">><跨度class="token operator"><复选框标签<跨度class="token operator">=<跨度class="token string">“注册北极星通讯”检查<跨度class="token operator">=<跨度class="token punctuation">{通讯<跨度class="token punctuation">}onChange<跨度class="token operator">=<跨度class="token punctuation">{handleNewsLetterChange<跨度class="token punctuation">}<跨度class="token operator">/<跨度class="token operator">><跨度class="token operator"><文本框的值<跨度class="token operator">=<跨度class="token punctuation">{电子邮件<跨度class="token punctuation">}onChange<跨度class="token operator">=<跨度class="token punctuation">{handleEmailChange<跨度class="token punctuation">}标签<跨度class="token operator">=<跨度class="token string">“电子邮件”类型<跨度class="token operator">=<跨度class="token string">“电子邮件”自动完成<跨度class="token operator">=<跨度class="token string">“电子邮件”helpText<跨度class="token operator">=<跨度class="token punctuation">{<跨度class="token operator"><跨度<跨度class="token operator">>我们将使用<跨度class="token keyword">这电子邮件地址，通知您北极星未来的变化<跨度class="token punctuation">。<跨度class="token operator"><<跨度class="token operator">/跨度<跨度class="token operator">><跨度class="token punctuation">}<跨度class="token operator">/<跨度class="token operator">><跨度class="token operator"><按钮提交<跨度class="token operator">>提交<跨度class="token operator"><<跨度class="token operator">/按钮<跨度class="token operator">><跨度class="token operator"><<跨度class="token operator">/FormLayout<跨度class="token operator">><跨度class="token operator"><<跨度class="token operator">/形式<跨度class="token operator">><跨度class="token punctuation">）<跨度class="token punctuation">；<跨度class="token punctuation">}

道具

想让这个功能变得更好吗?请分享你的反馈。

接口 FormProps
acceptCharset<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">字符串

空格分隔的字符编码列表。
行动<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">字符串

提交时在哪里发送表单数据。
自动完成<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">布尔

授予浏览器自动完成输入元素的能力。
孩子们<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">反应。<跨度class="PropsTable_SyntaxType__UfemH">ReactNode

要在表单中显示的内容。
encType<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">“应用程序/ x-www-form-urlencoded”|<跨度class="PropsTable_SyntaxString__dOIZE">“多部分/格式”|<跨度class="PropsTable_SyntaxString__dOIZE">“文本/普通”

向服务器提交内容时的媒体类型。
implicitSubmit<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">布尔

切换表单提交时按Enter键。默认为true。
方法<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">“职位”|<跨度class="PropsTable_SyntaxString__dOIZE">“得到”|<跨度class="PropsTable_SyntaxString__dOIZE">“行动”

用于提交表单的方法。
名字<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">字符串

表单的唯一名称。
已经<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">布尔

表单在提交时是否被验证。
preventDefault<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">布尔

阻止默认的表单操作。
目标<跨度>？<跨度class="PropsTable_Valuex__TSgMZ">字符串

在何处显示表单提交后的响应。
onSubmit<跨度class="PropsTable_Valuex__TSgMZ">（<跨度>事件：<跨度class="PropsTable_SyntaxType__UfemH">反应。<跨度class="PropsTable_SyntaxType__UfemH">FormEvent<<跨度class="PropsTable_SyntaxType__UfemH">HTMLFormElement>）=><跨度class="PropsTable_SyntaxType__UfemH">无效

提交表单时回调。

最佳实践

form组件应该用于:

  • 环绕所有表单输入元素
  • 模拟原生HTML形式元素的行为onSubmit回调

可访问性

表单组件将内容封装在HTML中< >形式元素。这有助于支持使用不同交互和浏览模式的辅助技术。

表单只能有一个提交按钮，并且必须位于表单的末尾。默认情况下，添加到表单中的按钮被赋予类型属性设置为按钮避免冲突。要将按钮改为提交按钮(type = "提交")，设置提交按下按钮。

键盘支持

默认情况下，implicitSubmitProp被设置为真正的。这允许商家提交表单输入/返回当焦点位于表单内的任何文本字段时，此键。这为键盘用户提供了一个快捷方式。如果此行为不适合表单，则将该道具设置为假。