[英]ReactJs:onClick on a div execute a function and onClick outside of this div execute another function
这是我的代码
class ServiceCard extends Component {
constructor(props) {
super(props)
this.state = {
redirect: false,
}
}
render() {
if (this.state.redirect)
return <Redirect to={'/service/' + this.props.service.id}></Redirect>
return (
<div onClick={() => this.setState({ redirect: true })} className="service-card">
<div style={{ color: '#' + this.props.service.title_color }} className="service-name">
{this.props.service.title}
</div>
<div className="service-Edit" >
<div className="service-info">
<ReactSVG src="/img/services/vue.svg" />
<p>{this.props.service.nbr_views} Views</p>
</div>
<div className="edit_Button">
<div className="edit_image">
<Link to={'/edit/service/' + this.props.service.id} >
<img src="/img/ui/editService.png" style={{ width: "32px" }} />
</Link>
</div>
<div className="switch-edit" >
<Switch id={this.props.id} check={this.props.check}></Switch>
</div>
</div>
</div>
</div>
我有 className="service-card" 的父 div,其中所有组件都可以单击,当我单击时,他将设置状态重定向为 true,然后他将我重定向到服务组件
我尝试使用 Ref 反应如下,但她不像我想要的那样工作
componentDidMount() {
document.addEventListener('mousedown', this.handleClick , false);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick ,false);
}
handleClick=(e)=>{
if(this.node.contains(e.target)){
return console.log("cliiicked");
}
this.handleClickOutSide()
}
handleClickOutSide=()=>{
if(this.nodeg){
this.setState({ redirect: true })}
}
render() {
console.log(this.props.service.layout_xml_template, "rrrr")
if (this.state.redirect)
return <Redirect to={'/service/' + this.props.service.id}></Redirect>
return (
<div ref={node =>this.nodeg=node} className="service-card">
<div style={{ color: '#' + this.props.service.title_color }} className="service-name">
{this.props.service.title}
</div>
<div className="service-Edit" >
<div className="service-info">
<ReactSVG src="/img/services/vue.svg" />
<p>{this.props.service.nbr_views} Views</p>
</div>
<div className="edit_Button">
<div className="edit_image">
<Link to={'/edit/service/' + this.props.service.id} >
<img src="/img/ui/editService.png" style={{ width: "32px" }} />
</Link>
</div>
<div className="switch-edit" ref={node =>this.node=node}>
<Switch id={this.props.id} check={this.props.check}></Switch>
</div>
</div>
</div>
</div>
)
}
}
我怎样才能让组件可点击期望 div className="switch-edit" 不要忘记这个 div 在 div className="service-card" 内
一个简单的解决方案是检查点击了哪个元素。 为此,您可以创建一个函数来验证单击了哪个 div,例如:
...
const handleClick = event => {
if (event.target.className === 'switch-edit' /* Or whatever you want */)
return; // Or make another action.
};
render() {
if (this.state.redirect)
return <Redirect to={'/service/' + this.props.service.id}></Redirect>
return (
<div className="service-card" onClick={handleClick}>
<div style={{ color: '#' + this.props.service.title_color }} className="service-name">
{this.props.service.title}
</div>
<div className="service-Edit" >
<div className="service-info">
<ReactSVG src="/img/services/vue.svg" />
<p>{this.props.service.nbr_views} Views</p>
</div>
<div className="edit_Button">
<div className="edit_image">
<Link to={'/edit/service/' + this.props.service.id} >
<img src="/img/ui/editService.png" style={{ width: "32px" }} />
</Link>
</div>
<div className="switch-edit">
<Switch id={this.props.id} check={this.props.check}></Switch>
</div>
</div>
</div>
</div>
)
}
}
我希望这个简单的解决方案对您有所帮助!
您可以使用event.stopPropagtion
查看 MDN 文档,在您的内部可点击元素处理程序上,然后该事件不会“上升”到它的父级。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.