react子传父

Posted 2022-02-05 luguankun

react里子组件不能直接操作父组件的数据。

所以要从父组件传递一个方法给子组件，

子组件获取到该方法后，把子数据传入该方法，

父组件才能获取到子数据

例子：

子组件 Child.js

import React,  Component  from ‘react‘
class Child extends Component
    constructor(props)
        super(props)
        this.state = 
            cdata:"子组件数据"
        
    
    render()
        return(
            <div>
                <button onClick=this.trans.bind(this,this.state.cdata)>确定</button>
            </div>
        )
    

    //点击子组件时，定义一个方法，调用父组件传过来的方法，把子组件数据传入到这个方法里
    trans(data)
        this.props.content(data)
    

export default Child;

 

父组件App.js

import React,  Component  from ‘react‘;
import Child from ‘./Child‘
class App extends Component
  constructor(props)
    super(props)
    this.state = 
      pdata:"父组件数据"
    
  
  render()
    return(
      <div>
        /* 传递一个方法给子组件 */
        <Child content=this.getValue.bind(this)></Child>
        this.state.pdata
      </div>
    )
  

  //在方法里传入一个参数，val就是子组件传过来的数据
  getValue(val)
    this.setState(
      pdata:val
    )
  

export default App;