53js / react-jsonschema-form-validation Goto Github PK

Hi!!

I can get the context:

import { Form, useFormContext } from 'react-jsonschema-form-validation';
const context = useFormContext()

context is always

undefined

Any idea? I wonder if there is something related with webpack and default exports.

memoGetOnChangeHandler = memoize((onChange, handleFieldChange) => (event) => {
		if (onChange) {
			// Pass Form.handleFieldChange handler as extra parameter to the onChange handler
			onChange(event, handleFieldChange);
			return;
		}

		handleFieldChange(event);
	})

this is onChange handler from Field.js. It passes further only first argument 'event' from component, but e.g. react-select passes the second param https://react-select.com/props.

I am trying to wire the submit button the the Form component's valid state. In other words, the goal is to keep the button disabled until the form satisfies all validity constraints.

My current implementation is based on React references and, as expected, works unsatisfactorily due to the asynchronous nature of the process. There is no guarantee that the valid state of the Form component is updated by the time setState is run in the parent component:

this.FormRef = React.createRef(null);

handleChange = (data) => {
     this.setState({
        formData: data,
        success: false,
        invalid: !this.FormRef.current.state.valid
    })
}
...
<Form
   ref={this.FormRef}
   …
>
…
</Form>

ReactJS is still somewhat out of my depth, but I wonder whether the Form component could be tweaked to expose its valid state more reliably and painlessly—for instance by passing valid as a prop to the onChange callback, or including it in form data, or by not triggering the onChange handler until the state has been updated.

Thanks for your help and for a fantastic library.

The debug flag is prefixed with REACT_APP_... so it is adapted to cra but not for other build tools such as gatsby which requires env variables to be prefixed with GATSBY_ to be available client-side.