LinkedState decorator example (nécessite babel-polyfill)

LinkedState.js

import mixin from './mixin';

export default mixin({
  linkState(field) {
    return {
      value: this.state[field],
      requestChange: (value) => {
        this.setState({[field]: value})
      },
    };
  }
});

Login.js

import AuthService from './AuthService';
import LinkedState from './LinkedState';

@LinkedState
export default class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

  login() {
    AuthService.login(this.state.username, this.state.password);
  }

  render() {
    return (
        <form onSubmit={() => this.login()}>
          <div className="form-group">
            <input type="text" valueLink={this.linkState('username')} placeholder="Pseudo" />
          </div>
          <div className="form-group">
            <input type="password" valueLink={this.linkState('password')} placeholder="Mot de passe" />
          </div>
          <div className="form-group">
            <button type="submit">Connexion</button>
          </div>
        </form>
    );
  }

};

mixin.js

export default function (behaviour, sharedBehaviour = {}) {
  const instanceKeys = Reflect.ownKeys(behaviour);
  const sharedKeys = Reflect.ownKeys(sharedBehaviour);
  const typeTag = Symbol('isa');

  function _mixin (clazz) {
    for (let property of instanceKeys)
      Object.defineProperty(clazz.prototype, property, {
        value: behaviour[property],
        writable: true
      });
    Object.defineProperty(clazz.prototype, typeTag, { value: true });
    return clazz;
  }
  for (let property of sharedKeys)
    Object.defineProperty(_mixin, property, {
      value: sharedBehaviour[property],
      enumerable: sharedBehaviour.propertyIsEnumerable(property)
    });
  Object.defineProperty(_mixin, Symbol.hasInstance, {
    value: (i) => !!i[typeTag]
  });
  return _mixin;
};