javascript - clearAllSearchCriteria 的所有值都应该传递给 NoResult 组件

Question

• 我是新手。
• 我正在尝试在 reactjs 中从父级调用子方法。
• 这里的 NoResult 组件出现在 SportsCardList 组件中，SportsCardList 组件出现在 Sports-search-favorites-tab 中
• 所以这里涉及三个不同的组件。

• 当我点击“清除所有搜索条件”div 时，clearAllSearchCriteria 的所有值都应该传递给 NoResult 组件，然后这些值应该从那里传递给 Sports-search-favorites-tab.js

• 我使用了以下链接并进行了实现，但收到错误类型错误:_this.alfoRef.handleDeleteFromParent 不是函数。 call child function from parent in reactjs

• 你们能告诉我如何将值从子组件传递到父组件吗，因为中间存在另一个组件。以便将来我自己修复它。
• 由于我的代码库很大，请在下面单独提供我的相关代码片段

类型错误:_this.alfoRef.handleDeleteFromParent 不是函数

祖父成分 1 体育搜索-收藏夹-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(中间组件 2) SportsCardList.js

import NoResult from './no-result';

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

<NoResult clearAllSearchCriteria={this.clearAllSearchCriteria}/>

child (孙子)成分 3 无结果.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 /> 中发挥作用将对该函数的引用传递给他的 grand <Son /> 的组件通过 Prop 通过 <Father /> .

希望对您有所帮助!