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;