LinkedStateMixin

LinkedStateMixin模块为组件提供linkState方法，用于构建linkState(key)函数，自动更新组件state[key]值，实现双向绑定。

 

'use strict';

// 构建对象{value,requestChange}，value为初始值，requestChange为方法，须手动调用
// 在本模块中，value为state[key]的初始值，requestChange用于更新state[key]
var ReactLink = require('./ReactLink');

// 设定属性key后，返回函数，该函数接受value，内部调用组件component.setState方法，更新state[key]=value
var ReactStateSetters = require('./ReactStateSetters');

/**
 * 针对react手动调用setState方法的单向数据流，提供双向绑定
 * 使用linkState(key).requestChange(value)传值后自动调用setState方法，更新state
 *
 * 示例
 * var LinkedStateMixin = require('react-addons-linked-state-mixin');

 * var WithoutLink = React.createClass({
 *   mixins: [LinkedStateMixin],
 *   getInitialState: function() {
 *     return {message: 'Hello!'};
 *   },
 *   render: function() {
 *     var valueLink = this.linkState('message');
 *     var handleChange = function(e) {
 *       valueLink.requestChange(e.target.value);
 *     };
 *     return <input type="text" value={valueLink.value} onChange={handleChange} />;
 *   }
 * });
 */
var LinkedStateMixin = {
  // ReactStateSetters.createStateKeySetter方法用于构建linkState(key)返回对象的requestChange方法
  // 实现传值后自动调用setState方法，更新state
  linkState: function (key) {
    return new ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key));
  }
};

module.exports = LinkedStateMixin;