Question

我的组件中有“更新”按钮。单击此“更新”按钮我的应用程序   向下滚动到特定的父节。此父节已显示在   该页面由另一个组件组成。此“父”部分包含切换按钮，并使用此切换按钮应用程序在此“父”部分中显示/隐藏其他子部分。单击“更新”按钮，我必须显示该子部分。总之，我必须调用将组件的子组件与另一个组件同级的切换方法。

我的Headerbox.js包含“更新”按钮，该按钮调用gotoUpdatesWeekSection（）函数，应用程序向下滚动到“ updatesInWeek”部分。   引用

我的Headerbox.js文件包含更新按钮和滚动功能，如下所示：

<div className={keyUpdateBtnstitle}>
    <a className={scUpdateBtn} href="javascript:void(0);" onClick={()=>gotoUpdatesWeekSection()}>2 updates</a>
</div>

function gotoUpdatesWeekSection(){
     scrollToElement('#updatesThisWeek', {offset:-90})
    }

然后应用程序向下滚动到UpdatesSection.js文件中的以下部分。

import React, { PropTypes } from 'react'
import {toggle_button, item_container, item_container_big, containerFilter, itemFilter, innerSize, layerOneDiv, learnMoreLink} from './layerOneBoxItem.css'

export default class LayerOneBoxItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        toggle:false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle(e){
    e.preventDefault()
      this.setState({toggle:!this.state.toggle})

  }
  renderToggleButton(){
    if (this.state.toggle === false){
        return <button className={toggle_button} onClick={this.toggle}>
        See why
        </button>
    }else{
        return <button className={toggle_button} onClick={this.toggle}>Collapse</button>
    }
  }


  renderItemSmall(){
    if (!this.state.toggle){
     return (
            <div className={item_container} onClick={this.toggle}>

             //code to display small section

             </div>
        )
   }
  }
  renderItemBig(){
    if (this.state.toggle){
     return (
            <div className={item_container_big}>

              //code to display big section

             </div>
        )
   }
  }
  render() {
    return (
            <div>
             {this.renderItemSmall()}
             {this.renderItemBig()}
             </div>
        )
  }
}

显示此组件的主文件如下：

import {UpdatesSection,HeaderBox} from 'components'
return (
        <div className="wrapper">
        <HeaderBox 
        data={headerData} 
        braintree={props.braintree} 
        uid={props.uid} 
        viewedCardsInMonth={props.viewedCardsInMonth} 
        scUpdatesCount={props.scUpdatesCount} 
        getUserSCRatings={props.getUserSCRatings}/>

       <UpdatesSection 
                uid={props.uid} 
                ticker={props.stockcard.ticker} 
                scUpdatesCount={props.scUpdatesCount} 
                scUpdatesInWeek={props.scUpdatesInWeek}  
                analystconsensus={props.stockcard.analystRecommendation}
                getUserSCRatings={props.getUserSCRatings}
                scUpdatesRating={props.scUpdatesRating}
                ticker={props.stockcard.ticker} 
                braintree={props.braintree} 
                subscribedCards={props.subscribedCards} 
                getUserSubscribedCards={props.getUserSubscribedCards} 
                gotoLoginPage={props.gotoLoginPage} 
                gotoSignupPage={props.gotoSignupPage}
                />
    </div>
  )

Answer 1

要在子组件中调用切换方法，必须进行以下更改：

1。在您的主文件中进行这些更改

制作一个这样的方法，当您单击“更新”按钮时将其调用，并将该方法作为道具传递给 Header 组件。

let flowLayout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout flowLayout.estimatedItemSize = CGSize(width: (UIScreen.main.bounds.width / 2), height: 2000.0) flowLayout.itemSize = UICollectionViewFlowLayout.automaticSize
override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes { setNeedsLayout() layoutIfNeeded() let size = contentView.systemLayoutSizeFitting(layoutAttributes.size) var frame = layoutAttributes.frame frame.size.height = ceil(size.height) layoutAttributes.frame = frame return layoutAttributes }
callToggleMethod(){ this.updateSectionRef.toggle(); }

2。更改您的更新按钮方法

<HeaderBox callToggleMethod={this.callToggleMethod}/>

现在，当您单击Header Component'updates'按钮时，首先它将调用其父组件方法<UpdatesSection ref={c = {this.updateSectionRef = c; }}/>，我们通过此ref引用您的function gotoUpdatesWeekSection(){ scrollToElement('#updatesThisWeek', {offset:-90}) this.props.callToggleMethod(); }组件，它可以访问您在callToggleMethod中的任何方法。

如何从另一个组件的按钮单击事件更改组件的状态？

1 个答案: