import React, {Component} from 'react'
import "./Screen.css"
import "./LoginScreen.css"
/**
* Экран логина
* @extends Component
*/
class LoginScreen extends Component {
render() {
return(
<div class="screen login_screen">
<div class="content">
<div>
<h1 align="center">Вход</h1>
<div class="inputFieldLabel">Логин</div>
<input class="inputField" id="login"/>
<div class="inputFieldLabel">Пароль</div>
<input class="inputField" id="password" type="password"/>
<button class="button" onClick={(e)=>{
let login = document.getElementById("login").value
let password = document.getElementById("password").value
console.log(`login: ${login}, password: ${password}`)
}}>Войти</button>
</div>
</div>
</div>
)
}
}
export default LoginScreenimport React, {Component} from 'react'
import "./Screen.css"
import "./LoginScreen.css"
/**
* Экран логина
* @extends Component
*/
class LoginScreen extends Component {
constructor(props) {
super(props);
this.loginRef = null;
this.passwordRef = null;
}
render() {
return(
<div class="screen login_screen">
<div class="content">
<div>
<h1 align="center">Вход</h1>
<div class="inputFieldLabel">Логин</div>
<input class="inputField" ref={ref => this.loginRef = ref} />
<div class="inputFieldLabel">Пароль</div>
<input class="inputField" type="password" ref={ref => this.passwordRef = ref} />
<button class="button" onClick={(e)=>{
console.log(`login: ${this.loginRef.value}, password: ${this.passwordRef.value}`)
}}>Войти</button>
</div>
</div>
</div>
)
}
}
export default LoginScreen
Простой
Средний
