1

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

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

我们通过使用效果并在调用onChange. 这个JSFiddle展示了我们所做的，但我无法让它在 JSFiddle 上工作。

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

4

1 回答 1

3

在架构中添加默认值。

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'}}

在此处输入图像描述

于 2020-06-01T05:51:16.123 回答