问题标签 [react-jsonschema-forms]

我在构建与 json 反应的表单时遇到问题。我已经安装了 react-jsonschema-form 但我无法让它工作。我在本地安装了包，我正在使用 TypeScript，我正在使用 nx/nrwl。这是我尝试过的。

问题是我从哪里得到 JSONSchemaForm 变量？

例如，这个小片段就像一个魅力 https://codepen.io/krcaltomas99/pen/abvaJdb

谢谢你的建议！

我有一个带有 useEffect 的 react 组件，当道具更改时它不会被触发。我希望这个组件根据道具更新它显示的内容。然而，当道具改变时，什么也没有发生。

为了调试，我添加了一个可以手动更新值的按钮，效果很好。我只是无法让 useEffect 为我的生命运行。

我尝试将 useEffect 函数监视的值从formContext更改formContext.queryData[0].basicInformation.firstName为无效。我也尝试过使用props。我什至尝试完全删除手表阵列，希望它只是垃圾邮件更新，但没有。

关于如何实现这一目标的任何建议？我知道该值正在传递给组件，因为它在我按下按钮时起作用。当我在网页上的 React 检查器中检查它时，我可以清楚地看到该值在那里。干杯。

编辑：这个组件被用作 react-jsonschema-form 的小部件。基本上每次formData更新都会发生什么，我将它传递回formContext. formContext是我可以将其他数据获取到该小部件的唯一方法。下面是我正在做的精简版。

使用[1]，我们可以从配置而不是代码react-jsonschema-form动态渲染组件。ReactIE

我们可以使用uiSchema对象来自定义和配置每个组件的单独外观。但是，是否有可能，而不是以线性方式创建表单，我可以获得每个单独的元素并将它们放置在我想要的位置？

例如，我可能想要name字段 onpage1和age字段 on page3。目前我能想到的唯一方法是编辑包的源以返回单个元素，而不是将它们包装到Form对象中。

也许有一些方法React可以从对象中询问和提取单个组件Form？

谢谢

[1] https://react-jsonschema-form.readthedocs.io/en/latest/

使用https://react-jsonschema-form.readthedocs.io来呈现基于 json 模式的表单，我可以为每个字段定义验证。这很好也很简单，我唯一要寻找的是一种创建更有意义的完整验证错误的方法。

例如

架构：

这提供了验证并返回如下错误文本：

• firstName：不应短于 8 个字符
• firstName: 应该匹配模式 "\d+"

我想将第一部分更改为“名字”，甚至翻译它。我怎么可能做到这一点？

编辑

我认为可以定义firstNameas First name，这需要将 formData 对象重新映射到实际键的一些“复杂”。

我有一个包含对象数组的 JSON 模式。我希望这些对象中的一个字段依赖于数组外部的属性。

我创建了以下架构：

我希望新字段note会更新 at 的那个items/note，但它没有，而是note在底部生成了一个新字段。这可以在这里看到：

https://codepen.io/samfentr/pen/ZEQpeyg

我认为该解决方案与添加$ref参考有关，但我无法解决。

我对 Web 开发 (html/js) 完全陌生，但现在想使用 react-json-schema 包，它在提供的沙箱中效果很好。

但是，我什至无法让教程正常工作。我编写了一个 html，如教程中所述：

相应的 javascript 文件“react.js”：

但是，打开 html 时，模式根本不会显示在浏览器中。没有错误信息。

我尝试过的事情：

1.）从cdn导入脚本，所以在html头中添加这些行：

2.) 在本地和全局重新安装 npm 和 react-json-schema、react 和 react-dom 包

3.）在js中导入所述包：

这对整个反应来说是非常新的，但据我了解，它schema决定了表单数据应该是什么：

虽然uiSchema决定了它应该是什么样子：

这两个都在 a 中page_schema.js，还有这个：

这是page_form.js：

但是由于某种原因，导出的样式不会生效。检查 Chrome 中的代码会发现 classNamelabel-date-align已正确分配，但它看起来很糟糕，即使是简单的文本颜色更改也不起作用。

有什么我错过的吗？

我正在学习反应。我正在尝试将来自https://github.com/rjsf-team/react-jsonschema-form?fbclid=IwAR0HdGosg659-F0hdFp-milh29G_6UX5_qbti6lZBmo7OYKIxgThD5f1Ff8的反应 FORM 组件添加到我的虚拟应用程序中。我使用了 react json 模式表单文档https://react-jsonschema-form.readthedocs.io/en/latest/#installation。

我有红色的使用来自 js 源映射的 React 组件 和react-jsonschema-form 如何通过 cdn 使用它？这可能正在解决类似的问题。但是，我仍然很挣扎。

我做了：

1. npx create-react-app my-app

2. cd my-app,npm install
   我的反应版本是
   "react": "^16.13.1",
   "react-dom": "^16.13.1",
   "react-scripts": "3.4.1"

3. npm install @rjsf/core --save

我的虚拟 App.js 组件：

我点击 npm start 并得到错误：

据我了解，webpack 找不到 JSONSchemaForm 模块（？）我尝试将文档中的 cdn 文件添加到 index.html。

它没有帮助。文档说我应该添加一个源映射。但是，我不熟悉源映射。我在 mozilla MDN 上定义了红色，但我不知道如何实现它。我也不熟悉手动设置webpack配置，也不熟悉这个解决方案react-jsonschema-form中提到的require.js如何通过cdn使用？ .

问题是 - 添加源地图解决问题的可能性有多大？需要学习 webpack 吗？您是否看到我无法显示表单组件的其他原因？

如果添加 source map 可能会解决问题，那么在这种情况下，哪些 webpack 属性是必不可少的？

默认情况下，rjsf 将数组项呈现为表单上的单独字段。因此，例如，此架构/布局：

将在其自己的行上渲染每个字符串项以及添加、删除、重新排序按钮。但是我想要实现的是使用 material-ui 的 Autocomplete 元素来处理整个数组，其中一个 Autocomplete 将代表整个数组，并且项目将是其中的芯片。所以，我使用了上面的模式，并定义了这个小部件：

使用handleChange方法传递值数组，如下所示：

自动完成按我的预期工作，并将所有输入的值保存到字符串数组中。但是后来当这个值数组被传递到更远的地方时，我从 rjsf 得到一个错误：

所以，我认为发生的事情是我将数组项指定为字符串，这就是它验证失败的原因。但是有没有办法“欺骗” rjsf 并实现我想要的？rjsf 中的多选也是一个字符串数组，但它作为一个组件可以正常工作，并且不会在新字符串上呈现每个项目......

我尝试使用 ArrayTemplate，但它只允许使用 onAddClickProp 为项目添加新的小部件。

我正在尝试使用这个游乐场来找到一个模式，该模式将允许我显示一个对象可添加的自定义属性（基本上我希望用户输入一个关联数组）。

当我这样做时：

我明白了

但我不希望显示标题“newKey Key”和“newKey”。

我尝试在 uischema 中禁用标签

但这只会禁用它们的值，而不是键

如何摆脱“newKey Key”？