Unable to access React instance (this) inside event handler [duplicate]

by

this.changeContent needs to be bound to the component instance via this.changeContent.bind(this) before being passed as the onChange prop, otherwise the this variable in the body of the function will not refer to the component instance but to window. See Function::bind.

When using React.createClass instead of ES6 classes, every non-lifecycle method defined on a component is automatically bound to the component instance. See Autobinding.

Be aware that binding a function creates a new function. You can either bind it directly in render, which means a new function will be created every time the component renders, or bind it in your constructor, which will only fire once.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

vs

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

Refs are set on the component instance and not on React.refs: you need to change React.refs.someref to this.refs.someref. You’ll also need to bind the sendContent method to the component instance so that this refers to it.

More Related Contents:

  1. Unable to use Arrow functions inside React component class [duplicate]
  2. Exporting functions with reactjs and babel
  3. setState doesn’t update the state immediately
  4. What do multiple arrow functions mean in JavaScript?
  5. Adding script tag to React/JSX
  6. Why does babel rewrite imported function call to (0, fn)(…)?
  7. Call async/await functions in parallel
  8. When to use ES6 class based React components vs. functional ES6 React components?
  9. Why and when do we need to bind functions and eventHandlers in React?
  10. Getting Unexpected Token Export
  11. What does three dots do in ReactJS [duplicate]
  12. Extending built-in natives in ES6 with Babel
  13. How to add multiple classes to a ReactJS Component?
  14. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  15. React useState hook event handler using initial state
  16. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  17. When should I use brackets with imports
  18. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  19. Webpack babel 6 ES6 decorators
  20. How to publish a module written in ES6 to NPM?
  21. Best way to polyfill ES6 features in React app that uses create-react-app
  22. ES6 `export * from import`?
  23. this.setState is not a function [duplicate]
  24. Clean way to keep original variable and destructure at the same time
  25. Error: How to serialize data from getStaticProps : Next.js
  26. Difference between import X and import * as X in node.js (ES6 / Babel)?
  27. Update one of the objects in array, in an immutable way
  28. Is there a way to render multiple React components in the React.render() function?
  29. How to namespace es6 classes (for React components)
  30. “unexpected token import” in Nodejs5 and babel?

Leave a Comment