Как еще можно получить значения поля input в react?

Question

[Иван Павленко]

Балуюсь с React. Докатился до компонента экрана логина, и момента когда надо получить значение поля input при нажатии кнопки. Ничего умнее getElementById не придумал, но где то в глубине, у меня есть вера в то, что React возможно видит это немного иначе.

Итак, как правильно в React получить значение поля input.

Код компонента

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 LoginScreen

Answer 1

[davidnum95]

А доку почитать? https://reactjs.org/docs/forms.html

Answer 2

[undef1ned]

import 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

Вот дока: https://reactjs.org/docs/refs-and-the-dom.html