@ fieldia/ 反应
外地 在反应 18 和 19 中的表单: 薄壳过
@fieldia/viewer,所以一个页面看起来和行为都与任何其他框架相同.
npm install @fieldia/react
import { FieldiaForm } from '@fieldia/react';
import { createMemoryDataSource } from '@fieldia/core';
import page from './customer.page.json';
const dataSource = createMemoryDataSource();
export function Customer() {
return <FieldiaForm page={page} dataSource={dataSource} recordId={1} skin="underline" />;
}
单位 下一个 (或任何服务器的回复),给出组件 firstPaint数字 :
它使表单在服务器上成为了第一个涂料——它的平面HTML值,
在Fieldia的外观中——浏览器在任何脚本和水合物之前显示为
然则,观者在它上面,就把它拉上来,然后,他把它装满
同时键入( e)@fieldia/viewer/server) (中文(简体) ).
// app/enquiries/[id]/page.tsx — a server component loads the record…
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const record = await loadEnquiry((await params).id);
const nonce = (await headers()).get('x-nonce') ?? undefined; // with a strict Content-Security-Policy
return <Enquiry record={record} nonce={nonce} />;
}
// enquiry.tsx — …and the client component paints it first.
'use client';
export function Enquiry({ record, nonce }: { record: Values; nonce?: string }) {
return <FieldiaForm page={page} dataSource={dataSource} recordId={record.id as number} nonce={nonce} firstPaint={{ values: record }} />;
}
自定义字段和槽内容可以是 React 组件(fieldTypes, (中文(简体) ), slots(三);
useFormState(form) 给一个形式状态 作为反应状态。 打开列表页面
一行通过 onOpenRecord。 。 。 .
表格上的事件是道具,每个在每一个渲染物上读取新内容而不挂起
再来一次; onAction 可能回答按钮或 call 步骤 :
<FieldiaForm
page={page}
dataSource={dataSource}
pages={pages}
onAction={async ({ action, values }) => (action === 'check_stock' ? { values: { price: await priceOf(values.product) } } : undefined)}
onChange={({ field, value, by }) => {}} // by: 'person' | 'step' | 'app'
onSave={({ recordId, values }) => {}}
onSend={({ values }) => {}}
onStep={({ step }) => {}}
onRun={({ id, result }) => {}}
/>
host 财务报告和审定财务报表 onOpen 是查看者自己的选项(参见 @fieldia/viewer; 计 数
控件来源 ref 或者说 onReady 已经 on, (中文(简体) ), setValues 财务报告和审定财务报表 run。 。 。 .
一个页面带有 continueLater 打开您服务器上保存的草稿
resume={new URLSearchParams(location.search).get('resume') ?? undefined},则
键后继续链接 onDraft={({ key, later, saved }) => …}
已被告知每份草稿。 一个新的 resume 打开这个草案,作为一个新的
recordId 打开记录.
从链接中填充字段的页面( E)prefill阅读浏览器的地址;
在服务器上或在其他页面中显示的应用程序会给出链接
知道吗 url="https://homes.example/enquiry?agent=mona&unit=B-12"页:1 ?…
部分,或 url={{ agent: 'mona' }}。一个新的 url 从它开始表格.
在你的应用程序离开前,请检查一下: await handle.form.leave() 在路由更改之前, 在卸载之前 <FieldiaForm>, (中文(简体) ),
在改变再次挂起它的道具之前page, (中文(简体) ), form, (中文(简体) ), dataSource, (中文(简体) ),
recordId, (中文(简体) ), resume, (中文(简体) ), url, (中文(简体) ), user, (中文(简体) ), context, (中文(简体) ), dir, (中文(简体) ), labels, (中文(简体) ), fieldTypes, (中文(简体) ), slots名称
内 functions) (中文(简体) ). 反应
立即卸下,所以没有别的东西能把人留在那里。 等着救赎
在路上,然后问 "放弃你的改变?" 只有当他们的工作有危险,
当他们选择逗留的时候,他们回答是虚假的. warnOnLeave 拥有浏览器本身
返回, 重新装入或关闭标签先询问, 而有更改没有保存 .
投出场或槽的组件按其制成的位置保存:
它显示一个小盒子 命名它, onError={(error, where) => …} 被告诉,和
其余的表格会挂起 否则反应会毁掉一切
在最接近的误差边界下,与它同为表单。 查看器拒绝的一页
说为什么在表格的位置, onError 并保留应用程序的挂载:
没有什么被扔进反应。 麻省理工学院有执照.