React双向绑定

原创 大大大大糖糖 随笔 react 403阅读 2017-06-19 14:01:55 举报

vue里面的v-model命令实现了数据双向绑定,那react里面改怎么实现呢

代码:
javascript 代码

或者

[code=javascript,javascript 代码]import React from 'react'

var BindingMixin = {
handleChange:function(key){
var This=this;
return function(e){
var newState={};
newState[key]=e.target.value;
This.setState(newState)
}
}
}

class Binging extends React.Component {
constructor(props){
super(props);
this.state={
text:'',
comment:''
}
this.handleChange = BindingMixin.handleChange
}
render(){
return(
<div className="container">
<form>
<input type="text" name="name" onChange={this.handleChange('text')} />
{this.state.text}<br/>
<input type="text" name="comment" onChange={this.handleChange('comment')} />
{this.state.comment}
</form>
</div>
)
}
}
export default Binging;[/code]

原理解析
onChange事件更新组件里面的state状态
封装handleChange函数,更改对应state里面对应key的值

初学者,多有不足,欢迎指出

评论 ( 3 )
最新评论
hugeannex 2F 2017-06-19 16:35:08 3F

不是指es6,而是rect的JSX还夹带js。。。

大大大大糖糖 1F 2017-06-19 16:03:36 2F

恩?es6语法

hugeannex 2017-06-19 14:44:00 1F

好奇怪的语法。。。