以编程方式在 react-jsonschema-forms 中设置默认值答案

【问题标题】：Programatically setting default values in react-jsonschema-forms以编程方式在 react-jsonschema-forms 中设置默认值
【发布时间】：2020-05-05 23:02:45
【问题描述】：

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

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

我们通过在调用 onChange 之前使用效果并添加超时来使其工作。这个JSFiddle 显示了我们所做的，但我无法让它在 JSFiddle 上工作。

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

【问题讨论】：

标签： reactjs typescript react-jsonschema-forms

【解决方案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}/>)
}

默认值将在道具中获取。如果默认值不存在，我添加了今天的日期

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

另一种设置值的方法是您可以将 formData 属性传递给 Form。

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

您可以将数据作为键值 p2020-06-09air 传递给模式中定义的名称

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

【讨论】：