SHARE
TWEET

Untitled

a guest Oct 14th, 2019 94 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component, PureComponent, createContext} from 'react';
  2.  
  3. const Context = createContext();
  4.  
  5. class User {
  6.   constructor(getState, rootUpdater) {
  7.     this._getState = getState;
  8.     this._rootUpdater = rootUpdater;
  9.  
  10.     this.name = '';
  11.     this.surname = '';
  12.   }
  13.  
  14.   _setValue = (value = {}) => {
  15.     this._rootUpdater({
  16.       user: {
  17.         setName: this.setName,
  18.         setSurname: this.setSurname,
  19.         ...this._getState().user,
  20.         ...value
  21.       }
  22.     });
  23.   };
  24.  
  25.   setName = (name = '') => {
  26.     this._setValue({name});
  27.   }
  28.  
  29.   setSurname = (surname = '') => {
  30.     this._setValue({surname});
  31.   }
  32.  
  33. }
  34.  
  35. class Store extends Component {
  36.   constructor(props) {
  37.     super(props);
  38.     this.rootUpdater = (data = {}) => {
  39.       this.setState({
  40.         ...this.state,
  41.         ...data
  42.       })
  43.     };
  44.  
  45.     this.getState = () => {
  46.       return this.state;
  47.     };
  48.  
  49.     const user = new User(this.getState, this.rootUpdater);
  50.     this.state = {user};
  51.   }
  52.  
  53.   render() {
  54.     return (
  55.       <Context.Provider value={this.state}>
  56.         {this.props.children}
  57.       </Context.Provider>
  58.     );
  59.   }
  60. }
  61.  
  62. function Layout() {
  63.   return (
  64.     <div>
  65.       <Title />
  66.       <Input />
  67.     </div>
  68.   );
  69. }
  70.  
  71.  
  72. class Title extends PureComponent {
  73.   static contextType = Context;
  74.  
  75.   render() {
  76.     return (
  77.       <div>
  78.         <h3>
  79.           name {this.context.user.name}
  80.         </h3>
  81.         <h3>
  82.           surname {this.context.user.surname}
  83.         </h3>
  84.       </div>
  85.     );
  86.   }
  87. }
  88.  
  89.  
  90. class Input extends PureComponent {
  91.   static contextType = Context;
  92.   constructor(props) {
  93.     super(props);
  94.     this.nameInput = React.createRef();
  95.     this.surnameInput = React.createRef();
  96.   }
  97.  
  98.   setName = (e) => {
  99.     this.context.user.setName(e.target.value);
  100.   }
  101.  
  102.   setSurname = (e) => {
  103.     this.context.user.setSurname(e.target.value);
  104.   }
  105.  
  106.   render() {
  107.     return (
  108.       <div>
  109.         <div>
  110.  
  111.           <p>change name </p>
  112.           <input ref={this.nameInput} onChange={this.setName} />
  113.         </div>
  114.         <div>
  115.           <p>change name </p>
  116.           <input ref={this.surnameInput} onChange={this.setSurname} />
  117.         </div>
  118.       </div>
  119.     );
  120.   }
  121. }
  122.  
  123. export function App() {
  124.   return (
  125.     <Store>
  126.       <Layout />
  127.     </Store>
  128.   );
  129. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top