javascript - 如何将数据从react子组件传输到父组件

Question

我需要弄清楚如何将子组件中收到的数据传输到父组件中的数据。我需要设置在子组件中收到的控制台日志以传输到父组件状态。

目前我有:

 Child Comp: 

    import Picker from 'react-giphy-component'
    import React, { Component, PropTypes } from 'react'




    class AddGif extends Component {


      log (gif) {
        console.log(gif.original.mp4)
      }

     returnedGifObject = gif ;


      render () {
        return (
          <div>
            {/* <button></button> */}
            <Picker onSelected={this.log.bind(this)} />
          </div>
        )
      }
    }

    export default AddGif;


    parent element 
class PostBox extends Component {

  constructor(props){
    super(props)
    this.state = {
      title: null,
      postBody: null,
      giphyUrl: null,

      displayGifPicker: false
    }
  }
    getGifState = (selectedUrl) => {
      this.setState({ giphyUrl: selectedUrl})
    }

      render () {
        const {title, postBody} = this.state
        const displayGifPicker = this.state.displayGifPicker
        return (
          <Grid item xl={8}>
         {/* <Card className={classes.card} style={mt4}>  */}
         <Card style={mt4}> 
          <CardContent > 
              <PostInput onChange={this.handleInputChange} onSubmit={this.handleSubmit}/>
              {displayGifPicker ? (<AddGif selectedGif = {this.getGifState} />) : (<Button size="small" onClick={this.displayGifPicker} ><button>Add Gif</button></Button>)}
            <CardActions>
            {/* <Button size="small">Submit VH5</Button> */}
            </CardActions>
          </CardContent>
        </Card>
      </Grid>
        )
      }
    }

Answer 1

您将函数 prop 传递给了子组件。然后在 Children 组件中调用它:

log = (gif) => {
   const { selectedGif } = this.props
   console.log(gif.original.mp4)
   selectedGif(gif.original.mp4)
}