final form

form.tsx

import React from 'react';
import LoginFormState from './formstate';
import { useInstance } from './hooks';
import { Observer } from 'mobx-react';


const LoginForm = () => {
    const formData = useInstance(() => new LoginFormState());
    return (
        <Observer>
            {() => {
                return (
                    <div className="login-form">
                        <div className="login-form_field">
                            <label>username</label>
                            <input onChange={(e) => { formData.username.onChange(e.target.value); }} />
                        </div>
                        <div className="login-form_field">
                            <label>password</label>
                            <input onChange={(e) => { formData.password.onChange(e.target.value); }} />
                        </div>
                        <button type="button" onClick={formData.onSubmit}>submit</button>
                    </div>)
            }}
        </Observer>
    );
}

export default LoginForm;