在 React JSON Schema Form v4 中重写 BaseInput 小部件

Question

我正在使用 React JSON Schema Form v4 并尝试使用自定义实现覆盖 BaseInput 小部件。我已经声明了我的默认小部件，如下所示：

const defaultWidgets: Widgets = {
  DateWidget: DatePickerWidget,
  DateTimeWidget: DatePickerWidget,
  FileWidget: FileWidget,
  BaseInput: BaseInput
};

但是，当我渲染表单时，自定义 BaseInput 小部件似乎没有应用。这是我的 SchemaForm 组件的片段：

import { AjvError, withTheme, IChangeEvent, ErrorSchema, FormProps, ISubmitEvent, Widget } from '@rjsf/core';
import { Theme as AntDTheme } from '@rjsf/antd';
 
const Theme = { ...AntdTheme };

const ThemedForm = withTheme(Theme);

const SchemaForm = <T extends object>({
  // ... other props
  widgets = {},
  // ... other props
}: SchemaFormProps<T>) => {

  const formWidgets = { ...defaultWidgets, ...widgets };

  return (
    // ... rest of the component
    <ThemedForm
      // ... other props
      widgets={formWidgets}
      // ... other props
    >
      {children}
    </ThemedForm>
    // ... rest of the component
  );
};

我尝试了不同的方法来声明和重写 BaseInput 小部件，但它似乎没有按预期工作。谁能指导我正确的方法来覆盖 React JSON Schema Form v4 中的 BaseInput 小部件？

还尝试了this方法，使用uiSchema，但无法使其工作。

Answer 1

使用

react-declarative

时，任何输入类型都可以用 OneSlotFactory

覆盖

链接到游乐场

<OneSlotFactoryInternal Combo={ComboSlot} Date={DateSlot} Time={TimeSlot}>
  <App />
</OneSlotFactoryInternal>

...

import { DatePicker } from "@mui/x-date-pickers";
import { useMemo } from "react";
import { IDateSlot, datetime } from "react-declarative";
import dayjs from "dayjs";

export const DateSlot = ({
  invalid,
  value,
  disabled,
  description = "",
  outlined = true,
  title = "Text",
  labelShrink,
  dirty,
  autoFocus,
  inputRef,
  onChange,
  name,
}: IDateSlot) => {
  const dayjsValue = useMemo(() => {
    if (value) {
      const date = datetime.parseDate(value);
      if (!date) {
        return undefined;
      }
      let now = dayjs();
      now = now.set("date", date.day);
      now = now.set("month", date.month - 1);
      now = now.set("year", date.year);
      return now;
    }
    return undefined;
  }, [value]);

  return (
    <DatePicker
      label={title}
      value={dayjsValue}
      onChange={(value: dayjs.Dayjs | null) => {
        if (value) {
          const day = value.get("date");
          const month = value.get("month") + 1;
          const year = value.get("year");
          onChange(new datetime.Date(day, month, year).toString());
          return;
        }
        onChange(null);
      }}
      slotProps={{
        textField: {
          inputRef,
          InputLabelProps: labelShrink
            ? {
                shrink: labelShrink,
              }
            : undefined,
          disabled,
          focused: autoFocus,
          variant: outlined ? "outlined" : "standard",
          label: title,
          name,
          helperText: (dirty && invalid) || description,
          error: dirty && invalid !== null,
        },
      }}
    />
  );
};

export default DateSlot;