React: Accessing Context in a ES6 Class

Question

Using the ES6 class syntax, I am unable to retain the value of context in other methods inside the class. For example:

class Repos extends React.Component {
  constructor(props, context) { // eslint-disable-line
    super(props, context);
    console.log(this.context.router);
  }

  handleSubmit(event) {
    event.preventDefault();
    const userName = event.target.elements[0].value;
    const repo = event.target.elements[1].value;
    const path = `/repos/${userName}/${repo}`;
    console.log(path); // eslint-disable-line
    this.context.router.push(path);
  }

For the first console log, context persists:

For the second console log, not so much:

How does one handle this.context in methods outside of the constructor, but inside the class?

how do you call `handleSubmit`? – madox2 Mar 30 '16 at 21:50 — madox2, Mar 30 '16 at 21:50

score 5 · Accepted Answer · answered Mar 30 '16 at 21:52

5

Have you not forgotten bind function to save context?

If you pass function to some action attribute (onSubmit, for example) you should use bind. React ES6-classes does not autobind methods.

answered Mar 30 '16 at 21:52

Aleksandr Petrov

1,288
9
13

or use arrow functions which lexically bind `this` – madox2 Mar 30 '16 at 21:55

React: Accessing Context in a ES6 Class

1 Answers1