ReactLink

ReactLink模块被LinkedStateMixin模块调用，用于实现双向绑定功能。

 

'use strict';

/**
 * React.createClass({
 *   getInitialState: function() {
 *     return {value: ''};
 *   },
 *   render: function() {
 *     var valueLink = new ReactLink(this.state.value, this._handleValueChange);
 *     return <input valueLink={valueLink} />;
 *   },
 *   _handleValueChange: function(newValue) {
 *     this.setState({value: newValue});
 *   }
 * });
 */

var React = require('./React');

// LinkedStateMixin模块中调用，将requestChange赋值为ReactStateSetters.createStateKeySetter方法
// 使返回实例的requestChange自动调用组件setState方法，更新state[key]值
function ReactLink(value, requestChange) {
  this.value = value;
  this.requestChange = requestChange;
}

/**
 * MyComponent.propTypes = {
 *   tabIndexLink: ReactLink.PropTypes.link(React.PropTypes.number)
 * }
 */

// 父组件通过LinkedStateMixin注入linkState方法，并且将linkState构建的函数传入子组件
// createLinkTypeChecker提供该函数的propsType校验
function createLinkTypeChecker(linkType) {
  var shapes = {
    value: linkType === undefined ? React.PropTypes.any.isRequired : linkType.isRequired,
    requestChange: React.PropTypes.func.isRequired
  };
  return React.PropTypes.shape(shapes);
}

ReactLink.PropTypes = {
  link: createLinkTypeChecker
};

module.exports = ReactLink;