react-jsonschema-forms - Custom ui:widget will not alter the formData

Question

When using ui:widget the field will not change the formData of the form, unlike when not using ui:widget any change in the field will be seen in the formData when the form is submitted.

Shall I change the formData of the form manually when the field text changes? if so, is there an example to do so?

Steps to Reproduce

1. Create the class that represent the custom UI, and use the following for render:

return ( <div > {this.props.children}
</div> )

2. Add to the schema.properties "City": {type: "string", title:"City"}
3. Add to the schema.properties "City": { "ui:widget": DefaultInput, classNames: "col-md-4"}

Where City is the name of the custom component. and DefaultInput is the class that represent the custom ui of field.

Expected behavior

To see the value of the custom text field when submit the form: onSubmit = ({formData}) => console.log(formData);

What I see is: {City: undefined}

Any idea?

Answer 1

如果您使用自定义 'ui:widgets'，则必须在任何项目的值发生更改时使用 json-schema-form onChange 方法，然后您可以从表单中获取更改的值。