0
点赞
收藏
分享

微信扫一扫

React实现双向数据绑定


react中的数据是单项绑定的,要想实现双向绑定对比vue还是要麻烦点的
react规定input中绑定的value如果是可变的值,必须提供一个onChange函数,或者变成readonly只读,或者使用defaultValue,显然要实现双向数据绑定就要给input一个onChange事件,在onChange事件中改变state中的值来改变value

react函数传参也有点小麻烦可以用 onChange={this.operation.bind(this,-1)}来传参
实现:

export default class Counter extends React.Component{
constructor(props){
super(props)
this.state = {
count:props.count
}
}
static defaultProps = {//如果没有传props,props的默认值
count:0
}
render(){
return (
<div ref="wrap">
<button onClick={this.operation.bind(this,-1)}>-</button>
<input type="button" value={this.state.count} />
<button onClick={this.operation.bind(this,1)}>+</button><br/>
操作结果:<input ref="ipt" type="number" value={this.state.count} onChange={this.readyChange} />
</div>
)
}
operation = (o) => {
this.setState({
count:this.state.count+o
})
}
readyChange = () => {
this.setState({
count:Number(this.refs.ipt.value)
})
}
}


举报

相关推荐

0 条评论