use loop traversal to render the information of the login user, how to query the overall information of the user through a single piece of data.
import React from "react";
import {Segment, Input, Button} from" semantic-ui-react"
import moment from "moment/moment";
export default class View extends React.Component {
constructor () {/ / Constructor
super ();
this.state = {
}
this.userChange = this.userChange.bind (this);
this.passwordChange = this.passwordChange.bind (this);
this.submit = this.submit.bind (this);
}
userChange (e) {
this.setState ({user: e.target.value})
}
passwordChange (e) {
this.setState ({password: e.target.value})
}
submit () {
if(window.localStorage.send){
var arr = JSON.parse(window.localStorage.send);
}else{
arr = [];
}
let time = moment().format("YYYY-MM-DD HH:MM:SS");
if(this.state.user==="1234"&&this.state.password==="1234"){
window.alert("");
let text = {user:this.state.user,password:this.state.password,time:time,state:""};
arr.push(text);
window.localStorage.send = JSON.stringify(arr);
this.props.history.push("/Page")
}else{
window.alert("");
let text = {user:this.state.user,password:this.state.password,time:time,state:""};
arr.push(text);
window.localStorage.send = JSON.stringify(arr);
} / / localStorage.clear ();
}
render () {
return (
< div style= {{margin:"10px"}} >
< Segment style= {{textAlign:"center"}} >
< H2 > Please log in < / H2 > < Input
id="user"
placeholder=" username"
style= {{marginBottom:"10px"}}
onChange= {this.userChange}
/ > < br/ >
< Input
id="password"
type="password"
placeholder=" password"
style= {marginBottom:"10px"}}
br {br}) >
< / Segment >
< / div >
)
}
}
import React from "react";
import {Segment, Input, Button} from" semantic-ui-react"
class Page extends React.Component {
constructor(){
super();
this.state = {
}
}
render () {
let send1 = window.localStorage.getItem("send");
send1 = JSON.parse(send1);
console.log(send1);
return(
<div>{send1.map(item=><div key={item.user}>
<ul >
<li>user:{item.user}</li>
<li>password:{item.password}</li>
<li>time:{item.time}</li>
<li>state:{item.state}</li>
</ul>
</div>)}
</div>)
}}
export default Page;