以编程方式设置react-jsonschema-forms中的默认值

Question

我正在尝试使用react-jsonschema-form向表单中的选择字段添加默认值。我实现这一点的方式是通过自定义组件。加载自定义组件时，它将使用默认数据调用onChange函数。我使用它的一个例子是，当我有一个日期字段时，我希望今天作为默认值。

如果我只有一个设置默认值的自定义组件，它就可以工作。但是，如果我有多个需要默认值的字段，它就不能工作。我做了一个小的JSFiddle来展示这一点。如果您没有更改任何内容并按下submit按钮，您可以看到只设置了date4。

在调用onChange之前，我们使用了一个效果并添加了一个超时，从而让它正常工作。这个JSFiddle显示了我们所做的工作，但是我不能让它在JSFiddle上工作。

我的问题是，使用react-jsonschema-form以编程方式设置默认值的最佳方式是什么？我真的不希望以编程方式修改模式本身。

Answer 1

在架构中添加默认值。

properties: {
        date: { type: "string", format: "date", default:'2020-06-09' },
        date2: { type: "string", format: "date" },
        date3: { type: "string", format: "date" },
        date4: { type: "string", format: "date" },
        description: { type: "string" }
    }

您将在自定义微件属性中获取默认值

const DatePickerDefaultToToday = (props) => {
    const onChange = (e) => {
            props.onChange(convertDateToString(e.value));
        }
  onChange({value: new Date(), syntheticEvent: null, show: true, target: null});
  return (<input type="date" onChange={onChange} defaultValue={props.value === undefined ? convertDateToString(new Date()) : props.value}/>)
}

默认值将在属性中获取。如果缺省值不存在，则添加ive以获取今天的日期

defaultValue={props.value === undefined ? convertDateToString(new Date()) : props.value}

设置该值的另一种方法是将formData属性传递给表单。

<Form schema={schema} uiSchema={uiSchema} formData={formData} widgets={customWidget} onSubmit={onSubmit}/>

您可以将数据作为key-value p2020-06-09air作为模式中定义的名称进行传递

const formData={{date:'2020-06-09'}}

​

​