所有clearAllSearchCriteria的值都應傳遞給NoResult組件

Question

• 我是新來的反應。
• 我試圖在reactjs中從父級調用子方法。
• 這里，NoResult組件存在於SportsCardList組件中，而SportsCardList組件存在於Sports-search-favorites-tab中
• 因此這里涉及三個不同的組件。

• 當我單擊Clear All Search Criteria div時，所有clearAllSearchCriteria的值都應傳遞到NoResult組件，然后從那里將值傳遞給Sports-search-favorites-tab.js

• 我使用下面的鏈接並實現了，但出現錯誤TypeError：_this.alfoRef.handleDeleteFromParent不是函數。 在reactjs中從父級調用子級函數

• 你們能告訴我如何將值從子級傳遞到父級，因為中間有另一個組件。 這樣將來我會自己修復它。
• 由於我的代碼庫很大，因此僅在下面提供我的相關代碼段

TypeError：_this.alfoRef.handleDeleteFromParent不是函數

祖父組件1 Sports-search-favorites-tab.js

import SportsCardList from './SportsCardList';

clearAllSearchCriteria = () => {
    console.log('clearAllSearchCriteria');
    this.alfoRef.handleDeleteFromParent();
}

   render() {
    const { classes } = this.props;

    return (
      <Card className={classes.card}>
        <CardContent style={{ paddingTop: 0, paddingBottom: 0 }}>
          <Typography className={classes.noResultContainer}>
            {/*<div className={classes.noResultContainer}>*/}
            <div className={classes.noResultContainerItemText}>No Results Were Returned</div>

            <CardActions className={classes.noResultContainerItem}>
              <div className={classes.clearAll} onClick={this.props.clearAllSearchCriteria} >Clear All Search Criteria</div>
              {/*<div onClick={() => props.clicked(clearAllSearchVar)}/>*/}
              {/*<div onClick={() => props.clicked(clearAllSearchCriteria)}> Clear All Search Criteria</div>*/}


            </CardActions>

            {/*
            <CardActions className={classes.noResultContainerItem}>
              <Button onClick={this.toggleDrawer("right", true)} size="small">Create task for Custom Payment Build</Button>
            </CardActions>*/}

            {/*</div>*/}
          </Typography>
        </CardContent>
        <Drawer
          style={{ width: 500 }}
          anchor="right"
          open={this.state.right}
          onClose={this.toggleDrawer("right", false)}
        >
          <div
            tabIndex={0}
            role="button"
          >
            {/*sideList*/}
            {/*sports advanced search for tab codes */}

            <TabDemo />
          </div>
        </Drawer>
      </Card>


    );

  }

父級1（中間component2）SportsCardList.js

import NoResult from './no-result';

clearAllSearchCriteria = () =>{
    console.log('clearAllSearchCriteria');
    this.props.clearAllSearchCriteria();
}

<NoResult clearAllSearchCriteria={this.clearAllSearchCriteria}/>

子級（孫子）組件3 no-result.js

return (
  <Card className={classes.card}>
    <CardContent style={{ paddingTop: 0, paddingBottom: 0 }}>
      <Typography className={classes.noResultContainer}>
        {/*<div className={classes.noResultContainer}>*/}
        <div className={classes.noResultContainerItemText}>No Results Were Returned</div>

        <CardActions className={classes.noResultContainerItem}>
          <div className={classes.clearAll} onClick={this.props.clearAllSearchCriteria} >Clear All Search Criteria</div>
          {/*<div onClick={() => props.clicked(clearAllSearchVar)}/>*/}
          {/*<div onClick={() => props.clicked(clearAllSearchCriteria)}> Clear All Search Criteria</div>*/}


        </CardActions>


        {/*
        <CardActions className={classes.noResultContainerItem}>
          <Button onClick={this.toggleDrawer("right", true)} size="small">Create task for Custom Payment Build</Button>
        </CardActions>*/}

        {/*</div>*/}
      </Typography>
    </CardContent>

  </Card>


);

Answer 1

祖父組成部分 ：

clearAllHandler = (clearAllSearchVar) => {
// Work with clearAllSearchVar
}
<Father clicked={this.clearAllHandler} />

父親組成部分 ：

<Son clicked={props.clicked} />

子組件 ：

<div onClick={() => props.clicked(clearAllSearchVar)}/>

應填寫clearAllSearchVar在<Son />組件，每當你點擊它的變量傳遞給clearAllHandler函數<Grandfather />組件，它傳遞給函數的引用到他的盛大 <Son />經由道具<Father /> 。

希望有幫助！

Answer 2

祖父：

import SportsCardList from './SportsCardList';

clearAllSearchCriteria = (clearAllSearchVar) => {
    //Work here with clearAllSearchVar
    console.log('clearAllSearchCriteria');
    this.alfoRef.handleDeleteFromParent();
}

<div>
    {/*<NoResult />*/}
    <SportsCardList clicked={this.clearAllSearchCriteria}/>

    <Dialog
        isOpen={this.state.open}
        onClose={() => {
            this.setState({ open: false });
        }}
    />
</div>

父親 SportsCardList.js：

    const SportsCardList = props => {
    <NoResult clicked={props.clicked}/>
}

兒子 NoResult.js：

const NoResult = props => {
<CardActions className={classes.noResultContainerItem}>
    <div className={classes.clearAll} onClick={() => props.clicked(clearAllSearchCriteria)} >Clear All Search Criteria</div>
</CardActions>
}

只要確保您填寫clearAllSearchCriteria變量即可。