Примеры интеракций

App.js

import React, { Component } from 'react';
import './App.css';

import Titler from './Titler'
import {observer, inject} from 'mobx-react';



@inject("model")
@observer
class App extends Component {
  render() {
    return (
     
      <div className="App">
       
        <p className="App-intro">
          Hello, World { this.props.model.title }
        </p>


        <Titler />
       
      
      </div>
     
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'mobx-react';



import ModelClass from './state/model'

const model = new ModelClass();
ReactDOM.render( <Provider model={model}><App /></Provider>, document.getElementById('root'));

model.js

import { observable } from "mobx"

class MyModel {
    @observable title = "sd";

    setTitle(title){
        this.title=title
    }

}

export default MyModel;

start.md

npx create-react-app myapp
cd myapp
npm run eject
npm i --save mobx mobx-react
npm install --save-dev babel-plugin-transform-decorators-legacy

Titler.js

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



@inject("model")
@observer 
class Titler extends Component {

  handleClick () {
    this.props.model.title="Новое значение"
  }

  handleSetClick () {
    this.props.model.setTitle("Сеттер")
  }

  handleChange (e) {
    this.props.model.title=e.target.value
  }

  render() {
    return (
      <div>
        <div >Тайтл: {this.props.model.title}</div>
        
        <div>
          <a href="javascript:void(0)" onClick={  () => this.handleSetClick() } >Установить значение сеттером</a>
        </div>

        <div>
          <a href="javascript:void(0)" onClick={  () => this.handleClick() } >Установить значение</a>
        </div>

        <input value={this.props.model.title} onChange = { (e) => this.handleChange(e) } />


        <div style={{"display": this.props.model.title=="Дамир"?"block":"none", "border":"1px solid red"}}>
          Кого я вижу!

        </div>

      </div>
    );
  }
}

export default Titler;