javascript - 尝试使用 mobX 代替 setState

Question

尝试替换react中的setState。在 mobX 中使用 observable 更改 this.info 的值时遇到问题。当我 console.log(e.target.name, e.target.value) 时，该值仅返回一个字母。

//Login
import * as React from 'react';
import { extendObservable } from 'mobx';
import { observer }  from 'mobx-react';

constructor(props) {
        super(props);

        extendObservable(this, {
            info: {
                username: '',
                password: ';
            }
        })
    }

onChange = (name, value) => {
    this.info[name] = value
}

render(){
    <LoginForm info={this.info} onChange={this.onChange}/>
}

//LoginForm
import * as React from 'react';
import {Form} from "semantic-ui-react";

const onChange = (props) => (e) => {
    props.onChange(e.target.name, e.target.value)
    console.log(e.target.name, e.target.value)
};

const LoginForm = (props) => {
    return (
                    <Form.Input fluid label='username' placeholder='username' name="username"
                                value={props.info.username|| ''}
                                onChange={onChange(props)} type="text" />
                    <Form.Input fluid label='password' placeholder='password' name="password"
                                value={props.info.passoword || ''}
                                onChange={onChange(props)} type="text"/>
    )
}

Answer 1

试试这个怎么样？ 更改信息对象而不是对象中的值

import { action, extendObservable } from "mobx";
onChange = action((name, value) => {
  this.info = { ...this.info , [name]: value };
});