React中子元素如何传递数据给父元素
将修改父元素数据的函数当成子元素的属性传递给子元素,子元素接收到该属性,通过该属性调用修改父元素数据的参数,并传入子元素自己想要传递给父元素,修改父元素值的数据.
- 创建父元素
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
ChildDate:null
}
}
render(){
return(
<div>
<h1>子元素传递给父元素的数据:{this.state.ChildDate}</h1>
<ChildCom setChildDate={this.setChildDate}/>
</div>
)
}
//修改数据
setChildDate=(data)=>{
this.setState({
ChildDate:data
})
}
}
- 创建子元素
class ChildCom extends React.Component{
constructor(props){
super(props)
this.state = {
msg:"helloworld,i am lallaalallalalalalal"
}
}
render(){
return(
<div>
<button onClick ={this.senddate}>传递hello给父元素</button>
</div>
)
}
senddate=()=>{
console.log(this.state.msg);
//将子元素传递给父元素,实际就是调用父元素传递进来的元素,完成子元素给父元素传值
console.log(this.props.setChildDate);
this.props.setChildDate(this.state.msg);
}
}
3.将子元素传递给父元素,实际就是调用父元素传递进来的元素,完成子元素给父元素传值
4. 完整代码
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
ChildDate:null
}
}
render(){
return(
<div>
<h1>子元素传递给父元素的数据:{this.state.ChildDate}</h1>
<ChildCom setChildDate={this.setChildDate}/>
</div>
)
}
//修改数据
setChildDate=(data)=>{
this.setState({
ChildDate:data
})
}
}
class ChildCom extends React.Component{
constructor(props){
super(props)
this.state = {
msg:"helloworld,i am lallaalallalalalalal"
}
}
render(){
return(
<div>
<button onClick ={this.senddate}>传递hello给父元素</button>
</div>
)
}
senddate=()=>{
console.log(this.state.msg);
//将子元素传递给父元素,实际就是调用父元素传递进来的元素,完成子元素给父元素传值
console.log(this.props.setChildDate);
this.props.setChildDate(this.state.msg);
}
}
ReactDOM.render(<ParentCom />,document.querySelector('#root'));
注:一定要采用驼峰命名法,对于我这个新手来说,在命名这块就吃了不少亏.