Doesn't work with decorator

[keatz55]

I have the following code:

import React, { Component, PropTypes } from 'react';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
import ReactMixin from 'react-mixin';
import s from './LoginPage.scss';
import withStyles from '../../decorators/withStyles';

const title = 'Log In';

@withStyles(s)
class LoginPage extends Component {

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

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  componentWillMount() {
    this.context.onSetTitle(title);
  }

  login(e) {
    e.preventDefault();
    console.log(e)
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{title}</h1>
          <form role="role">
            <div>
              <label>
                Email
              </label>
              <input type="email" valueLink={this.linkState('email')} placeholder="email" />
            </div>
            <div>
              <label>
                Password
              </label>
              <input type="password" valueLink={this.linkState('password')} placeholder="password" />
            </div>
            <button type="submit" onClick={this.login.bind(this)}>Login</button>
            <p>
              Forgot your password?
            </p>
          </form>
        </div>
      </div>
    );
  }

}

ReactMixin(LoginPage.prototype, LinkedStateMixin);

export default LoginPage

The react-mixin functionality works as intended without a decorator, however, when a decorator is included I get the error "this.linkState is not a function'

[brigand]

Does it work when you put the react-mixin decorator under the withStyles?

@withStyles(s)
@reactMixin.decorate(LinkedStateMixin)
class LoginPage extends Component {

[Lonelind]

Have the same issue. This is because when any code executes, its context doesn't match the class. Here, I suppose, must be a bind statement, that will explicitly set the context to decorated functions.

[brigand]

@Lonelind can you try to create a minimal repro case?

[Lonelind]

Sure.

For example, we could get a Lifecycle mixin form react-router v1.x (in 2.x mixins are deprecated). That's what I faced:

import React from 'react';
import { decorate as mixin } from 'react-mixin';
import { Lifecycle } from 'react-router';

@mixin(Lifecycle)
export default class RouteComponent extends React.Component {
    routerWillLeave(nextRoute) {
        console.log(this.state, this); // 'this' will be an anonymous function
    }

    render() {
        /* ... */
    }
}

routerWillLeave method is provided from mixin. If you use React.createClass, all methods are bond to this class by default. And you can use it in render just like <div onClick={this.handleClick} />. But if you use ES6 classes, NOTHING will be bond and you should bind every method by yourself. The same happens when mixin adds routerWillLeave. Everything should be bond to class explicitly. So, maybe this is responsibility of mixin maker, and if so, your solution won't work if there weren't any explicit binding.

[brigand]

So the lack of autobinding in react-mixin strikes again... it's in the readme that it's not supported, but maybe it's time to support it.