Программная установка значений по умолчанию в формах react-jsonschema

Question

Я пытаюсь добавить значения по умолчанию для выбора полей в моей форме с помощью response-jsonschema-form. Я добиваюсь этого за счет собственных компонентов. Когда пользовательский компонент загружен, он вызывает функцию onChange с данными по умолчанию. Пример того, когда я использую это, - это когда у меня есть поле даты, которое я хочу, чтобы сегодня было значением по умолчанию.

Если у меня есть только один пользовательский компонент, который устанавливает значение по умолчанию, он работает. Однако, если у меня есть несколько полей, требующих значений по умолчанию, это не сработает. Я сделал небольшой JSFiddle , демонстрирующий это в действии. Если вы ничего не измените и не нажмете кнопку отправки, вы увидите, что установлена ​​только дата 4.

Мы вроде как заставили его работать, используя эффект и добавив тайм-аут перед вызовом onChange. Этот JSFiddle показывает, что мы сделали, но я не могу заставить его работать с JSFiddle.

Мой вопрос: как лучше всего установить значение по умолчанию программно с помощью response-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}/>

Вы можете передать данные как ключ-значение p2020-06-09air как имя, определенное в схеме

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