React中子元素如何传递数据给父元素

React中子元素如何传递数据给父元素
将修改父元素数据的函数当成子元素的属性传递给子元素,子元素接收到该属性,通过该属性调用修改父元素数据的参数,并传入子元素自己想要传递给父元素,修改父元素值的数据.

1. 创建父元素

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
     })
   }
}

2. 创建子元素

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'));

注:一定要采用驼峰命名法,对于我这个新手来说,在命名这块就吃了不少亏.