Как сделать аутентификацию системы с помощью mobx в React - PullRequest
Новая
       13

Как сделать аутентификацию системы с помощью mobx в React

0 голосов
/ 18 марта 2019

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

import { observable, action } from 'mobx'

export default class SingUpIn {

  @observable initialState = {
    login: {
      form: {
        email: '',
        password: ''
      }
    }
  }

  @action changeInput = (email, password, type) => {
    this.initialState.type.form.email = email
    this.initialState.type.form.password = password
  }
}

И я сделал компонент SignUp, как показано ниже.
Я сделал так, что входные данные Id и пароля
переводятся в исходное состояние в реальном времени.
Но здесь возникает ошибка

const {электронная почта, пароль} = this.props.form.toJs ()
Ошибка типа: this.props.form не определена

Iдумаю, что общая логика не очень хорошая, что я сделал.
Не могли бы вы порекомендовать некоторые решения для этого случая? 

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { observer, inject } from 'mobx-react'

@inject('SignUpIn')
@observer
class SignUp extends Component {
  handleChange = e => {
    const { SignUpIn } = this.props
    const { name, value } = e.target

    SignUpIn.changeInput({
      name,
      value,
      form: 'login'
    })
  }

  render () {
    const { email, password } = this.props.form.toJs()
    const { handleChange } = this

    return (
      <div>
        <label for="email">Email</label>
        <input
          id="email"
          name="email"
          placeholder="email"
          value={email}
          onChange={handleChange}
        />
        <label for="password">password</label>
        <input
          id="password"
          name="password"
          placeholder="password"
          value={password}
          onChange={handleChange}
        />
        <button>Login</button>
        <Link to="/signin">SignIn</Link>
      </div>
    )
  }
}

export default SignUp
...