Javascript 尝试使用mobX替换setState

正在尝试替换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}/>
}

//登录
从“React”导入*作为React；
从'mobx'导入{extendObservable}；
从'mobx react'导入{observer}；
建造师（道具）{
超级（道具）；
可扩展可维护（此{
信息：{
用户名：“”，
密码：'；
}
})
}
onChange=（名称、值）=>{
this.info[name]=值
}
render（）{
}

//LoginForm
从“React”导入*作为React；
从“语义ui反应”导入{Form}；
const onChange=（道具）=>（e）=>{
props.onChange（e.target.name，e.target.value）
console.log（e.target.name，e.target.value）
};
const LoginForm=（道具）=>{
返回(
)
}

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

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

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