javascript - React 通过 子组件 进行双向数据绑定的问题
本文介绍了javascript - React 通过 子组件 进行双向数据绑定的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
import React from 'react'
class Chinds extends React.Component{
render(){
return <div>
<input value={this.props.dataValue} onChange={this.props.dataChange.bind(this)}/>
<p>{this.props.dataValue}</p>
</div>
}
}
class Parent extends React.Component{
constructor (props){
super(props);
this.state = {
value:"双向数据绑定"
}
}
handleChange (event){
this.setState({value:event.target.value})
}
render(){
var value = this.state.value;
return <div>
<Chinds dataValue={value} dataChange={this.handleChange}/>
</div>
}
}
export default Parent;
无论我怎么操作input它的值都没有发生变化
不使用子组件的时候这样是没问题的,这个逻辑哪里有问题呢?
解决方案
子组件通信需要把数据state绑定到父组件上,建议react 结合redux使用。
这篇关于javascript - React 通过 子组件 进行双向数据绑定的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文