我如何从React中嵌套子组件中获取父组件中的数据？

Question

我正在尝试将数据从嵌套子级传递到其父级组件 我是相当新的React开发人员。 我创建了一个多级下拉组件，并从其父级传递数据，现在我需要将所选数据从子级组件发送回其父级组件。 还是不是他们创建动态多层下拉菜单的方式。

class Product extends React.Component {
  constructor(props) {
    super(props);
    this.toggleHidden = this.toggleHidden.bind(this);
    this.state = {
      isHovered: false,
    }
  }

  toggleHidden () {
    this.setState({
      isHovered: !this.state.isHovered
    })
  }
  
  render() {
    const styles = {
      'backgroundColor': this.props.lightColor,
    }
    if (this.state.isHovered) {
      styles['backgroundColor'] = "#000000";
      styles['color'] = '#28d4ee';
    }

    return (
      <div className='singleProduct'
           onMouseEnter={this.toggleHidden}
           onMouseLeave={this.toggleHidden}
           style={styles}
           onClick={() => this.props.handleClick(this.props.id, this.props.name)}>
           
           {this.props.name}
      </div>
    )
  }
}

class ProductGroup extends React.Component {
  constructor(props) {
    super(props);
    this.toggleHidden = this.toggleHidden.bind(this);
    this.handleClick = this.handleClick.bind(this);
   
    this.state = {
      isVisible: false,
      id: "",
    }
  }


  toggleHidden () {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }
  //I need to send the ID to the parent Component
  async handleClick(id, name) {
    await this.setState({
      id,
      name
     });
     await this.props.replace(name);

  }

  render() {
    const BackgroundColor = "#000000";
    // Only make bg color if on hover
    const bgStyle = {
    }
    if (this.state.isVisible) {
      bgStyle['backgroundColor'] = BackgroundColor;
      bgStyle['borderLeft'] = '5px solid || {this.props.color}';
      bgStyle['color'] = "#28d4ee";
    }
    return (
      <div className='productGroup'
           onMouseEnter={this.toggleHidden}
           onMouseLeave={this.toggleHidden}
           style={bgStyle}>
        <i className={this.props.name}></i>
        {this.props.name}
        <span style={bgStyle} class="glyphicon glyphicon-triangle-right pull-right"></span>
        
        <div className={`productSet ${this.state.isVisible ? 'visible': ''}`}>
          {this.props.product.map(product => <Product
              key={product.id}
              id={product.id}
              name={product.name}
              lightColor={BackgroundColor}
              color={this.props.color}
              handleClick ={this.handleClick}
            />)}
        </div>
      </div>
    )
  }
}

class ProductGroupSelector extends React.Component {
  constructor(props) {
    super(props);
    this.toggleHidden = this.toggleHidden.bind(this);
    this.state = {
      isVisible: false,
      buttonText: "CHOOSE A SPORT"
      
    }
    console.log(props, "propssssss")
  }

  toggleHidden () {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }

  changeContent = name => {
    this.setState({
      buttonText: name
    });
    console.log(name, "name")
  };


  render() {
    const productGroups = this.props.productGroups;
    return (
   
      <div className='dropdown' onClick={this.toggleHidden}>
  
        <div className='topButton'>
            {this.state.buttonText}  
            <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>

        </div>
        <div className={`dropDownM ${this.state.isVisible ? 'visible': ''}`}>
          {productGroups.map(group => <ProductGroup replace = {this.changeContent} key={group.id} name={group.name} color="#123eee" product={group.products} />)}
        </div>
      </div>
    )
  }
}


class Dropdown extends React.Component {
  render() {
    const availableModules = this.props.availableModules;
    return (
      <div>
        <ProductGroupSelector productGroups={availableModules} />
      </div>
    )
  }
}


These all the components are in single file, I have a component where i am calling Drop-down component and sharing data from.

class ParentComponent extends React.Component {
  render() {
    const availableModules = "data": {
                 "category_products": [{
                    "id": 1,
                    "name": "Indoor",
                    "group": "Activities",
                    "products": [
                        {
                            "id": 2,
                            "name": "Shooting",
                            "category_id": 1
                        },
                        {
                            "id": 3,
                            "name": "Car Sim",
                            "category_id": 1
                        },
                        {
                            "id": 4,
                            "name": "Flight Sim",
                            "category_id": 1
                        }
                   }]
                  }
    return (
      <div>
        <Dropdown productGroups={availableModules} />
      </div>
    )
  }
}

ReactDOM.render(<ParentComponent/>, document.getElementById("root"));
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
<script type="text/babel">