Начиная

Итак, мы рассмотрим и попробуем создать современную учетную запись с использованием React с нуля. вам окончательный результат полной рабочей формы входа и регистрации.

Я предполагаю, что вы уже знакомы с основами React и знаете, как настроить проект React, поэтому вы можете просто следовать этому руководству, если вы этого не сделаете, пожалуйста, сначала посмотрите Серию курсов React, чтобы понять, что мы собираемся сделать.

Реагировать на формы

В основном, когда вы хотите иметь дело с формами на vanilla javascript или с помощью jquery, это может потребовать некоторого взлома, чтобы работать гладко, но с React вам даже проще сделать форму входа очень отзывчивой. .

Обязательно настройте проект React, над которым мы собираемся работать.

Наша цель — создать поля «Регистрация» и «Вход в систему», где мы сможем переключаться между ними с помощью специальных контроллеров кнопок.

Итак, сначала давайте создадим основной компонент приложения.

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoginOpen: true,
      isRegisterOpen: false
    };
  }

  render() {

    return (
      <div className="root-container">
 
      </div>
    );
  }
}

А также нам нужно отрендерить его в DOM

reactDOM.render(
  <App />, document.getElementById("root"));

Если вы хотите реализовать тот же стиль, что и мы, вы можете взять таблицу стилей CSS Здесь.

Теперь нам нужно создать два отдельных компонента для полей входа и регистрации и визуализировать их под основным компонентом приложения (рендеринг нескольких компонентов в React).

//Login Box
class LoginBox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  submitLogin(e) {}

  render() {
    return (
      <div className="inner-container">
        <div className="header">
          Login
        </div>
        <div className="box">

          <div className="input-group">
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              className="login-input"
              placeholder="Username"/>
          </div>

          <div className="input-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              className="login-input"
              placeholder="Password"/>
          </div>

          <button
            type="button"
            className="login-btn"
            onClick={this
            .submitLogin
            .bind(this)}>Login</button>
        </div>
      </div>
    );
  }

}

Под компонентом входа мы визуализируем окно входа с полями ввода (имя пользователя и пароль) и заголовком, чтобы показать, в каком поле мы сейчас находимся при входе или регистрации, и кнопку отправки, в которой метод submitLogin прослушивает событие щелчка. под кнопкой (Отправить форму).

Обязательно используйте привязку при передаче метода класса в обработчик событий, чтобы он знал, в каком контексте он находится в данный момент.

и то же самое относится к компоненту поля регистрации, просто скопируйте поле входа с некоторыми изменениями.

//Register Box 
class RegisterBox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  submitRegister(e) {}

  render() {
    return (
      <div className="inner-container">
        <div className="header">
          Register
        </div>
        <div className="box">

          <div className="input-group">
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              className="login-input"
              placeholder="Username"/>
          </div>

          <div className="input-group">
            <label htmlFor="email">Email</label>
            <input type="text" name="email" className="login-input" placeholder="Email"/>
          </div>

          <div className="input-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              className="login-input"
              placeholder="Password"/>
          </div>
          <button
            type="button"
            className="login-btn"
            onClick={this
            .submitRegister
            .bind(this)}>Register</button>
        </div>
      </div>
    );
  }
}

Только не забудьте добавить адрес электронной почты, указанный в поле регистрации, и все готово.

Теперь давайте визуализируем дочерние компоненты (поля входа и регистрации) в основном приложении, чтобы они отображались в DOM.

//App Component 
...
render() {
...
     <div className="box-container">
      {this.state.isLoginOpen && <LoginBox/>}
      {this.state.isRegisterOpen && <RegisterBox/>}
     </div>
...
}

Мы используем два логических значения (isLoginOpen и isRegisterOpen), которые определены в состоянии компонента, чтобы указать, какой из них отображать с помощью знака и (&&) компонента LoginBox. будет отображаться только в том случае, если логическое значение истинно, и это позволит нам переключаться между полями регистрации и входа в систему.

Переключить Войти и зарегистрироваться

Чтобы переключаться между двумя визуализируемыми компонентами (что означает визуализацию только одного и скрытие другого), поэтому мы собираемся создать два контроллера кнопок над фактическим полем входа/регистрации, которые позволят нам переключаться между полями.

//App Component 
render() {
...
     <div className="box-controller">
       <div
         className={"controller " + (this.state.isLoginOpen
         ? "selected-controller"
         : "")}
         onClick={this
         .showLoginBox
         .bind(this)}>
         Login
       </div>
       <div
         className={"controller " + (this.state.isRegisterOpen
         ? "selected-controller"
         : "")}
         onClick={this
         .showRegisterBox
         .bind(this)}>
         Register
       </div>
     </div>
...
}

Мы также назначаем нижнюю границу текущей активной кнопке-переключателю поля только для того, чтобы сделать ее удобной для пользователя, поэтому мы используем собственный класс выбранного контроллера, который будет добавлять границу текущего элемента, и мы используем встроенный оператор if ( Тернарный оператор If), чтобы контролировать их поведение.

И мы используем методы showLoginBox и showRegisterBox для рендеринга окна входа или регистрации.

//App
...
  showLoginBox() {
    this.setState({isLoginOpen: true, isRegisterOpen: false});
  }

  showRegisterBox() {
    this.setState({isRegisterOpen: true, isLoginOpen: false});
  }
...

Мы меняем логическое состояние, обновляя состояние компонента.

Теперь попробуйте получить доступ к странице входа, чтобы иметь возможность свободно вводить имя пользователя и пароль и/или перейти в поле регистрации.

Что дальше

Итак, это только первая часть руководства, в следующей мы завершим проект, реализуя проверку формы и угадывая надежность зарегистрированного пароля.