AntDesign (React) -11 simple to learn to use mobx

MobX by Mendix, Coinbase, Facebook and many open-source personal sponsors sponsored.

mobx redux and the like, can also be used for state management, and simpler and more flexible. Initial study, the first to achieve a simple function to modify a string value

Official website: https: //cn.mobx.js.org

1, the installation

yarn add mobx-react --save
yarn add mobx --save

 

...

 2, add import

import { observer } from 'mobx-react';
import { observable, computed, action } from 'mobx';

3, the following code is modified UserRole

import React from 'react';
import { observer } from 'mobx-react';
import { decorate,observable, computed, action } from 'mobx';
import { Button,Input} from 'antd';
@observer
class UserRole extends React.Component { 
  constructor(props) {
    super(props);
  }
  @observable roleName = "123";
  handleTestClick = e => {
    this.roleName="234";
    console.log(this.roleName);
  };
  render() {
    return (
       <div> Role Management
        <div> { the this .roleName} </ div>
      <Button type="primary" style={{marginTop:10,width:300}}  onClick={this.handleTestClick}>测试</Button>
      </div>
    );
  }
}
export default UserRole;

4. Click on the test, you can not see from the new state of the assignment, automatically rendering