Question

ReactJS鼓励单向数据流，但我想打破它以便在需要双向绑定输入框的情况下更容易开发。

我想要一个像这样的组件

var App = React.createClass({

    getInitialState: function(){
        return {
            user: {
                name: ''
            }
        }
    },

    render: function(){

        return <TwoWayBinder type="input" model="user.name" />;

    }

});

其中user.name是this.state中的变量。所以，我希望<TwoWayBinder />组件访问它的父组件的状态（根据React哲学，这是一种反模式）。我看到父组件在TwoWayBinder组件的_owner属性中可用。

这是访问所有者的唯一方法吗？我出于多种原因不想使用valueLink。

Answer 1

没有记录的api用于访问所有者。 _owner是唯一没有记录的方式（据我所知）。

更新：“component._owner不再可用于0.13”-zbyte

我个人并不是valueLink的粉丝。我一直在研究类似但更强大的系统。

在最低级别的表单中，您的代码如下所示：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>
    );
  }
});

这不错，给你很多控制权，但你可能想要更快的东西。 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>
    );
  }
});

为了完整性，这里是完整的混音：

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

仅针对这个问题，确实有内部API来获取版本0.13中的所有者：

this._reactInternalInstance._currentElement._owner._instance

如你所知，我们不推荐这样做。

ReactJS：我如何获得组件的所有者？

2 个答案: