ReactJS表单中的handleSubmit中的问题

Question

I am creating a login system by ReactJS. I have a problem while creating the login page. The following is my code:

export default class Login extends Component {
    state={
        data:{
            email:'',
            pass:''
        },
        loading:false,
        error:{}
    }
    handleChange=(e,{name,value})=>{
        this.setState({data:{[name]:value}});
        // console.log(this.state.data);
    }
    handleSubmit=()=>{
        const error=this.validate(this.state.data);
        this.setState({error:error});
        (_.isEmpty(this.state.error))
        ?(
        console.log(this.state.data)
        )
        :(console.log('Cannot submit'));
    }
    validate=(data)=>{
        const err={};
        if (!validator.isEmail(data.email)) {
            err.email='Invalid email'
        }
        if (!data.pass) {
            err.pass='Your password is missing'
        }
        return err;
    }
    render() {
        const {error}=this.state;
        return (
            <div className='login-form'>
                <Grid textAlign='center' style={{height:'100%', marginTop:80}} verticalAlign='middle'>
                <Grid.Column style={{maxWidth:500}}>
                <Form>
                <Segment raised textAlign='left'>
                <Header as='h2' color='blue' textAlign='center'>Please fill in login form</Header>
                <Form.Input fluid icon='mail' iconPosition='left' type='email' placeholder='Email' name='email' id='email' value={this.state.data.email} onChange={this.handleChange} required/>
                {(error.email)?(<InlineError text={error.email}/>):('')}

                <Form.Input fluid icon='privacy' iconPosition='left' type='password' placeholder='Password' name='pass' id='pass' value={this.state.data.pass} onChange={this.handleChange} required/>
                {(error.pass)?(<InlineError text={error.pass}/>):('')}
                <br/>
                <Checkbox label='Remember me'/>
                <br/>
                <Button color='blue' fluid size='medium' type='submit' onClick={this.handleSubmit}>Login</Button>
                </Segment>
                </Form>
                <Message attached='bottom' warning floating>New to us? <Link to='/signup'><a>Signup</a></Link></Message>
                </Grid.Column>
                </Grid>
            </div>
        )
    }
}

In my case, I want the form to be submitted successfully by displaying the user data in the console only when the {this.state.error} is empty. However, when I clicked the login button the first time, which I left an error intentionally, the form was submitted successfully and data was displayed in the console. I clicked it again the error was then displayed. Why was not the error shown in the first place? Can you tell me what is wrong with my code?

Answer 1

I think you need to do event.preventDefault() in

handleSubmit=(event)=>{
        event.preventDefault()
        const error=this.validate(this.state.data);
        if(error) {
           this.setState({error:error});
           return;
        }
        (_.isEmpty(this.state.error))
        ?(
        console.log(this.state.data)
        )
        :(console.log('Cannot submit'));
    }

because your button type is submit and it will reload the page