onSubmit 不起作用（react-material-ui-form-validator）

Question

当我添加一个ValidatorForm组件（react-material-ui-form-validator）时，我可以在输入中输入，但是当我输入数据并提交但状态和其他属性没有更新时，

我检查了控制台，onSubmit 不起作用

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

这两个代码都不起作用...

如何修复代码？ ValidatorForm 有问题吗？还是我的代码错了？

Answer 1

首先在您的句柄提交中尝试 event.preventDefault() 或者您也可以在按下“提交”按钮时调用句柄提交。

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>
    );
}