ReactJS: How can I get the owner of a component? - reactjs

Question

ReactJS encourages one-way data flow but I want to break it for easier development where I need to two-way bound Input box.
I want a component like this
var App = React.createClass({
getInitialState: function(){
return {
user: {
name: ''
}
}
},
render: function(){
return <TwoWayBinder type="input" model="user.name" />;
}
});
where user.name is a variable in this.state. So, I want <TwoWayBinder /> component to access the state of it's parent component (which is an anti-pattern according to React philosophy). I see that parent component is available in _owner property of TwoWayBinder component.
Is that the only way to access the owner? I don't want to use valueLink for multiple reasons.

Answer 1

There is no documented api for accessing the owner. _owner is the only undocumented way (as far as I know).
Update: "component._owner is no longer available in 0.13" -zbyte
I'm not a fan of valueLink personally. I've been working on a similar but more powerful system.
In its lowest level form your code looks like this: jsbin 1
var App = React.createClass({
mixins: [formMixin],
getInitialState: function(){
return {
data: { name: "", email: "" }
}
},
render: function(){
var formData = this.stateKey("data");
return (
<div>
<input type="text" value={this.state.data.name} onChange={formData.forKey("name").handler()} />
<input type="text" value={this.state.data.email} onChange={formData.forKey("email").handler() } />
</div>
);
}
});
That's not bad, and gives you a lot of control, but you might want something even quicker. jsbin 2
var Input = React.createClass({
render: function(){
var link = this.props.link;
return <input type="text"
{...this.props}
value={link.getCurrentValue()}
onChange={link.handler()} />
}
});
var App = React.createClass({
mixins: [formMixin],
getInitialState: function(){
return { data: { name: "", email: "" } }
}
},
render: function(){
var formData = this.stateKey("data");
return (
<div>
<Input link={formData.forKey("name")} />
<Input link={formData.forKey("email")} />
</div>
);
}
});
For completeness, here's the full mixin:
var formMixinHandler=function(thisArg,keys,parent){return{forKey:function(key){return formMixinHandler(thisArg,keys.concat(key),this)},bindTo:function(newThisArg){return formMixinHandler(newThisArg,keys,this)},transform:function(fn){var obj=formMixinHandler(thisArg,keys,this);obj.transforms=obj.transforms.concat(fn);return obj},transforms:parent?parent.transforms:[],handler:function(){var self=this;return function(event){var value=event;if(event.target instanceof HTMLInputElement)if(event.target.type==="checkbox"||event.target.type==="radio")value=event.target.checked;else value=event.target.value;self.transforms.reduce(function(last,fn){return fn(last,event)},value);var targetObj=keys.slice(0,-1).reduce(function(obj,key){if(!obj[key])obj[key]={};return obj[key]},thisArg.state);targetObj[keys[keys.length-1]]=value;var updateObject={};updateObject[keys[0]]=thisArg.state[keys[0]];thisArg.setState(updateObject)}},getCurrentValue:function(){return keys.reduce(function(obj,key){return obj?obj[key]:null},thisArg.state)}}};var formMixin={stateKey:function(key){return formMixinHandler(this,[].concat(key))}};

Answer 2

Just for the question, there is really internal API to get the owner in version 0.13:
this._reactInternalInstance._currentElement._owner._instance
As you know, it's really not recommended.