Question

我是新来的人。
我试图在reactjs中从父级调用子方法。
SportsCardList组件中存在NoResult组件，Sports-search-favorites-tab中存在SportsCardList组件
所以这里涉及三个不同的组件。
当我单击Clear All Search Criteria div时，所有clearAllSearchCriteria的值都应传递到NoResult组件，然后从那里将值传递给Sports-search-favorites-tab.js
我使用了以下链接并实现了，但是出现错误TypeError：_this.alfoRef.handleDeleteFromParent不是函数。 call child function from parent in 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（中间部分2） 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变量即可。

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

2 个答案: