Как организовать машинопись с помощью mobx в ReactJS - PullRequest
Новая
       17

Как организовать машинопись с помощью mobx в ReactJS

2 голосов
/ 24 марта 2019

Я сделал Mobx Store, как показано ниже.
Я объявил типы действий в store.js 

import { action, observable } from 'mobx';

export class SignStore {
  @observable
  UserInformation: {
    email: '';
    password: '';
  };

  @action
  handleChange = (e: any): void => {
    this.UserInformation[e.target.id] = e.target.value;
  };
}

И я вставил этот магазин в компонент.
Я объявил тип UserInformation здесь.
Но 'const {SignStore} = this.props;' здесь
SignStore говорит

Свойство 'SignStore' не существует для типа 'Readonly & Readonly <{children ?: ReactNode; }>». 

import * as React from 'react';
import { observer, inject } from 'mobx-react';

interface IUserInformation {
  email: string;
  password: string;
}

@inject('SignStore')
@observer
class SignUp extends React.Component<IUserInformation> {
  render() {
    const { SignStore } = this.props;

    return (
      <div className="container">
        <form className="white" onSubmit={}>
          <h5 className="grey-text text-darken-3">Sign Up</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={SignStore.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              onChange={SignStore.handleChange}
            />
          </div>

        </form>
      </div>
    );
  }
}

export default SignUp;

Не могли бы вы порекомендовать несколько советов в этом случае?

1 Ответ

1 голос
/ 24 марта 2019

Основная проблема, помимо других, заключается в том, что this.props относится к типу IUserInformation, который равен { email: string; password: string; }, затем вы пытаетесь деструктурировать это с помощью const { SignStore } = this.props;, очевидно, props не имеет параметра SignStore.Для этого реквизит должен выглядеть следующим образом: { email: string; password: string; SignStore: any }.

Я не очень знаком с mobx, но, похоже, вам потребуется хотя бы интерфейс ISignStore: 

interface ISignStore {
  UserInformation: IUserInformation;
  handleChange: (e: any) => void;
}

затем используйте это для вашего компонента: 

class SignUp extends React.Component<ISignStore>

и используйте его как: 

const SignStore = this.props;
...