标签: react-jsonschema-forms

我使用主题来控制应用程序的整体样式以及大量的TextField组件。

我希望它们都默认显示为具有variant='outlined'（因为尽管 MUI对此进行了解释，但灰色框的用户体验很差 - 它看起来太像一个禁用的文本字段）。

使用我自己的OutlinedTextField组件（我覆盖默认变体并将所有其他道具传递给）TextField不是一个选项，因为我使用rjsf-material-ui等工具。

看来我们可以设置变体（我在他们的主题文档中看到它，但找不到示例，并且无法理解我是否必须通过覆盖变体或更改全局 CSS 规则来做到这一点。

如何编辑主题以在所有 TextFields 上使用 `variant='outlined'？

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

当我这样做时：

{
  "title": "My object",
  "type": "object",
  "additionalProperties":  true
}

我明白了

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

我尝试禁用 uischema 中的标签

{
  "additionalProperties": {
      "ui:label": false
  }
}

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

如何摆脱“newKey Key”？

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

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

const ReadOnly = (props: WidgetProps) => {
    const [value, setValue] = React.useState('No Value');
    const { formContext } = props;

    const firstName = () => formContext.queryData[0]?.basicInformation?.firstName ?? 'No value';

    // This only runs once when the component is first rendered never fired when formContext updates.
    React.useEffect(() => {
        setValue(firstName());
    }, [formContext]);

    // This correctly updates the value
    const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.preventDefault();
        setValue(firstName()); …

我有这样的代码

const Jschema = {
    "type": "object",
    "title": "Create Form",
    "required": [
        "level1",
        "level2"
    ],
    "properties": {
        "level1": {
            "type": "string",
            "title": "Level 1",
            "default": ""
        },
        "level2": {
          "type": "array",
          "items": {
              "enum": [
                  "no position"
              ],
              "type": "string"
          },
          "title": "Level 2",
          "uniqueItems": true
        },
    },
    "description": "Create Form"
  }

  const uiSchema = {
    "ui:order": [
        "level1",
        "level2"
    ],

    "level1": {
        "ui:title": "Rank Level 1",
        "ui:widget": "dropdown",
        "ui:placeholder": "Please select rank level 1"
    },
    "level2": {
      "ui:title": "Rank …

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

import React from 'react';
import './form.scss';

const Form = JSONSchemaForm.default;
const schema = {
    type: "string"
};

/* eslint-disable-next-line */
export interface FormProps {
    json: any;
}


export const FormComponent = (props: FormProps) => {
        return (
            <>
                <Form schema={schema}/>
            </>
        );
    }
;

export default FormComponent;

问题是我从哪里获取 JSONSchemaForm 变量？

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

谢谢你的建议！