Question

我正在通过ReactJS创建一个登录系统。我在创建登录页面时遇到问题。以下是我的代码：

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

在我的情况下，我希望仅当{this.state.error}为空时才通过在控制台中显示用户数据来成功提交表单。但是，当我第一次点击登录按钮时，我故意留下了错误，表单已成功提交，数据显示在控制台中。我再次点击它，然后显示错误。为什么不首先显示错误？你能告诉我我的代码有什么问题吗？

Answer 1

我认为您需要在

中执行event.preventDefault（）

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

因为你的按钮类型是提交的，它会重新加载页面

ReactJS中的FormSubmit中的问题

1 个答案: