这里有新鲜出炉的 React.JS 教程,程序狗速度看过来!
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
这篇文章给大家介绍了在 React 中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
前言
React.js 现在已经很流行了,不会 React.js 都不好意思说自己会前端了。
那么下面就来看看关于 React 双向绑定的实现。
双向绑定的使用:
组件需要 mixins: 引用 LinkedStateMixin。它提供一个 linkState 方法。
参数是 state 属性
双向绑定用
- valueLink={this.linkState(XX)}
linkState 方法返回一个对象,有一个 value 属性,指定 state 的属性。
还有一个 requestChange 回调方法,用来实现 state 的修改。参数是新值
可以理解成 onchange 的绑定方法。可以自己写一个 linkState 对象,value 是
里用
- state.XX requestChange
来修改值。用
- setState()
来实现。
- valueLink={obj}
可以理解成
实现的就是指定绑定值 value 和 change 方法
- this.linkState()
valueLink 属性实现了
绑定到 value requestChange 方法绑定 onChange
- linkstate.value
可以创建
方法内使用
- 一个this.linkState('XX') value={XX.value} onchange={fn}
- Xx.requestChange(e.target.value)
-------------------------
小结:
方法提供 state 属性和 change 方法。
- linkState()
来实现 value 和 change 事件的绑定。
- valueLink={}
以下是实现代码
- /*默认表单双向绑定
- * 给每个input绑定change事件来实现修改state
- * 如果标签多了一个个绑定肯定是不行的,
- * 所以react 给我个提示了reactLink来
- */
- var Box1 = React.createClass({
- getInitialState: function() {
- return {
- name: 'star',
- bool: true
- }
- },
- handlNameChange: function(event) {
- this.setState({
- name: event.target.value
- });
- },
- handlboolChange: function(event) {
- this.setState({
- bool: event.target.checked
- })
- },
- render: function() {
- return ( < div > <input type = "text"value = {
- this.state.name
- }
- onChange = {
- this.handlNameChange
- }
- /> <br/ > <input type = "checkbox"checked = {
- this.state.bool
- }
- onChange = {
- this.handlboolChange
- }
- />
- </div > )
- }
- });
- React.render( < Box1 > </Box1>,document.querySelector('#div1'));
- / * ReactLink仅是提供了onchange setState模式的简单包装和约定。是其的简写方式 * 1、需要mixins添加引用 * 2、原先的value绑定换成valueLink。参数从this.state.XX换成this.linkState('XX')这样就可以了 * /
- / * ReactLink解析 * LinkedStateMixin给组件添加一个linkState方法,参数是state属性名。 * 它返回一个reactlink对象,包含state当前值和一个改变值的回调. * reactlink可以在组件间通过props传递 * /
- var Box2=React.createClass({
- mixins:[React.addons.LinkedStateMixin],/ / 添加引用getInitialState: function() {
- return {
- name: 'star',
- bool: true
- }
- },
- render: function() { //绑定时属性从value换成valueLink值需要用this.linkState方法调用
- return ( < div > <input type = "text"valueLink = {
- this.linkState('name')
- }
- /> <br/ > <input type = "checkbox"checkedLink = {
- this.linkState('bool')
- }
- />
- </div > );
- }
- }) React.render( < Box2 > </Box2>,document.querySelector('#div2'));
- / * 底层原理 * reactlink对象其实就一个value属性,和一个requestChange方法,value值是state。方法实现修改state值 * */
- var Box3=React.createClass({
- getInitialState:function(){
- return {
- name:'star',bool:true
- }
- },
- handlnamechange:function(val){
- this.setState({name:val})
- },
- handlboolchange:function(val){
- this.setState({bool:val})
- },
- render:function(){
- var reactlink={
- value:this.state.name,
- requestChange:this.handlnamechange
- }
- var reactlink2={
- value:this.state.bool,
- requestChange:this.handlboolchange
- }
- return(
- <div>
- <input type="text" valueLink={reactlink} / > <br / ><input type = "checkbox"checkedLink = {
- reactlink2
- }
- />
- </div > )
- }
- });React.render( < Box3 > </Box3>,document.querySelector('#div3'));
- / * valuelink * 它实际上实现的是状态的绑定和change事件的修改 * requestChange方法接收值来实现state的修改 * /
- var Box4=React.createClass({
- mixins:[React.addons.LinkedStateMixin],/ / 添加引用getInitialState: function() {
- return {
- name: 'star',
- bool: true
- }
- },
- render: function() {
- var valuelink = this.linkState('name');
- var handlenamechange = function(e) {
- valuelink.requestChange(e.target.value)
- }
- var valuelink2 = this.linkState('bool');
- var handlenboolchange = function(e) {
- valuelink2.requestChange(e.target.checked)
- }
- return ( < div > <input type = "text"value = {
- valuelink.value
- }
- onChange = {
- handlenamechange
- }
- /> <br/ > <input type = "checkbox"checked = {
- valuelink2.value
- }
- onChange = {
- handlenboolchange
- }
- />
- </div > )
- }
- });React.render( < Box4 > </Box4>,document.querySelector('#div4'));/
------------------------ReactLink 对象传递
可以向子组件传递:
- linkname = {
- this.linkState('name')
- }
子组件内可:
- <input type="text" valueLink={this.props.linkname}>
通过 props 来引用并绑定到 valueLink 上。
也可以用
来用方法修改值 。
- this.props.linkname.requestChange()
它们的变化 会同步到父组件的。并更新标签的。
总结
以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0526/331764.html