-
Notifications
You must be signed in to change notification settings - Fork 0
/
Image_Load.html
104 lines (98 loc) · 2.44 KB
/
Image_Load.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="utf-8">
<title>React Test</title>
</head>
<body>
<div id = 'root'></div>
<script type="text/babel">
const Display = (props) => {
return ( <div >
<img src = {props.linke} />
</div>
);
}
const Move = (props) => {
return (
<div>
<button onClick = {props.prevHandler} disabled={props.flag === -1}>Prev</button>
<button onClick = {props.nextHandler} disabled={props.flag === 1}>Next</button>
</div>);
}
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
item :[],
flag:-1,
counter:0
};
}
nextHandler = (e) =>{
if(this.state.counter < this.state.item.length - 1){
let count = this.state.counter + 1;
let newFlag = 0;
if(count === this.state.item.length - 1){
newFlag = 1;
}
this.setState({counter:count,flag:newFlag});
};
};
prevHandler = (e) =>{
if(this.state.counter > 0){
let count = this.state.counter -1;
let newFlag = 0;
if(count === 0){
newFlag = -1;
}
this.setState({counter:count,flag:newFlag});
};
}
render() {
let dis = null;
if(this.state.item.length > 0) {
dis = <Display linke = {this.state.item[this.state.counter].url}/>;
}
return (
<div>
<h1>
Hello, {this.props.name}
</h1>
{dis}
<Move flag = {this.state.flag} nextHandler = {this.nextHandler} prevHandler = {this.prevHandler} />
</div>
);
}
componentDidMount(){
console.log('didmount');
axios.get('http://www.splashbase.co/api/v1/images/latest')
.then(res => {
const persons = res.data;
console.log(persons);
this.setState({item:persons.images });
})
}
}
const element = <Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root'));
</script>
</body>
</html>