onSubmit not working (react-material-ui-form-validator)

Question

When I add a ValidatorForm component(react-material-ui-form-validator), I can type into the input but when I input data and submit but state and other properties does not update ,

I checked the console, onSubmit is not working

<ValidatorForm ref="form"
                onSubmit={() => console.log('this is submit')}> 
<ValidatorForm ref="form"
                onSubmit={this.addNewColor}> 

both of code does not working...

how can i fix the code? Has ValidatorForm issue? or my code is wrong?

Answer 1

First try event.preventDefault() in your handle submit or You can also call handle submit when "submit" button is pressed.

handleSubmit = (event) => {
    event.preventDefault();
    //state changing logic here

}

render() {
    const { email } = this.state;
    return (
        <ValidatorForm
            ref="form"
            onError={errors => console.log(errors)}
        >
            <TextValidator
                label="Email"
                onChange={this.handleChange}
                name="email"
                value={email}
                validators={['required', 'isEmail']}
                errorMessages={['this field is required', 'email is not valid']}
            />
            <Button type="submit" onClick={this.handleSubmit}>Submit</Button>
        </ValidatorForm>
    );
}