输入admin返回login为false
# 报错信息的截图
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
import React, { Component, Fragment } from 'react';
import axios from 'axios';
import './login.css';
import { Modal, Button, Input } from 'antd';
class Login extends Component {
constructor(props) {
super(props)
this.showModal = this.showModal.bind(this);
this.handleOk = this.handleOk.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleUserChange = this.handleUserChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.state = {
login : false,
visible: false,
user : '',
password : ''
}
}
// 模特框的显示 隐藏事件 start
showModal() {
this.setState({
visible: true,
});
};
handleOk() {
const { user, password } = this.state;
const url = `http://www.dell-lee.com/react/api/isLogin.json?user=${user}&password=${password}`;
axios.get(url)
.then(res => {
console.log(res);
})
};
handleCancel() {
this.setState({
visible: false,
});
}
// 模特框的显示 隐藏事件 end
// input框value值改变事件
handleUserChange(e) {
this.setState({
user : e.target.value
})
}
handlePasswordChange(e) {
this.setState({
password : e.target.value
})
}
render() {
const login = this.state.login;
return (
<Fragment>
<div className="login">
{
login == true ? <Button type="primary">退出</Button>
: <Button type="primary" onClick={this.showModal}>登录</Button>
}
</div>
<Modal
title="登录"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Input placeholder="请输入用户名" style={{marginBottom: '10px'}}
value={this.state.user} onChange={this.handleUserChange}
/>
<Input placeholder="请输入密码" type="password"
value={this.state.password} onChange={this.handlePasswordChange}
/>
</Modal>
</Fragment>
)
}
componentDidMount() {
axios.get('http://www.dell-lee.com/react/api/isLogin.json')
.then(res => {
this.setState({
login : res.data.data.login
})
})
}
}
export default Login;
正在回答
同学你好,老师昨天测试的时候,可能浏览器有缓存,所以登录结果显示true,刚刚再次测试,发现返回结果是false。由于登录的接口地址是http://www.dell-lee.com/react/api/login.json,同学的接口地址写错了,所以结果不正确,如下:
祝学习愉快!
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星