- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我点击“清除所有搜索条件”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>
);
最佳答案
祖父组件:
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 />
.
希望对您有所帮助!
关于javascript - clearAllSearchCriteria 的所有值都应该传递给 NoResult 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53785452/
如何捕获用户输入并将其传递到创建文本字段。 当前代码显示未定义。 新术语也没有添加到列表中,警报似乎不起作用。 $.getScript('//cdnjs.cloudflare.com/ajax/lib
我是新手。 我正在尝试在 reactjs 中从父级调用子方法。 这里的 NoResult 组件出现在 SportsCardList 组件中,SportsCardList 组件出现在 Sports-se
在 https://marmelab.com/react-admin/当我们显示资源列表时,我们可以从此操作添加过滤器 在过滤器上输入一些文本后,将会出现如下所示的 View ,显示没有记录 基本上,
我是一名优秀的程序员,十分优秀!