javascript - this.prop trampling in textarea change handler -

trying learn react. in sample app, other components need know if document (content of textarea) unsaved.

one method i'm trying having parent component inject prop can called child "editor" component.

except, when handlechange called textarea, this.props no longer refers editor. i'm sure have this trampling not sure on recommended way resolve it.

export default class editor extends react.component {      constructor(props) {         super(props);         console.log(this.props);     }      handlechange(event) {         console.log(this.props);         // this.props.setunsaved(true);     }      render() {         return <textarea onchange={this.handlechange} />;     } }; 

if there better ways share "unsaved" state, i'm open them. i'll need better model system, , might use backbone.

when using es6 class version of react classes (as opposed using react.createclass), functions aren't auto-bound (see no autobinding react docs). so, need manually bind function, perhaps with:

render() {     return <textarea onchange={this.handlechange.bind(this)} />; } 

if don't want have bind function every time use it, can manually bind functions when initialize class:

constructor(props) {     ...     this.handlechange = this.handlechange.bind(this); } 

or, if you're using transpiler supports es7 property initializers (like babel, es7.classproperties configuration option set), can define functions want bound using arrow function properties:

class editor extends react.component {     ...     handlechange = (event) => {         ...     } }