this is my code
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>
i have the parent div with className="service-card" where all the component is clickable when i click he will setstate redirect to true and he will redirect me to service component
i try with the Ref react as below but she doesn't work like i want
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>
)
}
}
how can i let the component clickable expect div className="switch-edit" don't forget that this div is inside the div className="service-card"
A simple solution for this is check to which element is clicked. To do that, you can create a function that verify which div is clicked, for example :
...
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>
)
}
}
I hope that this simple solution will help you !
您可以使用event.stopPropagtion
查看 MDN 文档,在您的内部可点击元素处理程序上,然后该事件不会“上升”到它的父级。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.