recentpopularlog in

therobyouknow : events   29

reactjs - React—add a click listener to dangerouslySetInnerHTML sub-element - Stack Overflow
class Element extends React.Component {
state = {
loadTime: 0,
lastUpdate: 0
};

lastUpdateTimer = null;

componentDidMount() {
this.resetTimer();

this.lastUpdateTimer = setInterval(this.setLastUpdate, 1000);

this.dynamicContentElement.addEventListener("click", this.handleClick)
}

componentWillUnmount() {
clearInterval(this.lastUpdateTimer);
this.dynamicContentElement.removeEventListener(this.handleClick)
}

resetTimer() {
const now = Date.now();

this.setState({
loadTime: now,
lastUpdate: now
});
}

setLastUpdate = () => {
this.setState({
lastUpdate: Date.now()
});
}

getDynamicContent() {
const time = Math.round((this.state.lastUpdate - this.state.loadTime) / 1000);
return {
__html: `<p>
You are here: <strong>${time}</strong> seconods.
<br>
<button id="btn">Click to reset counter</button>
</p>`
};
}

handleClick = (e) => {
if (e.target.id === "btn") {
this.resetTimer();
}
}

render() {
return (
<div>
Dynamic content below:
<div
ref={el => this.dynamicContentElement = el}
dangerouslySetInnerHTML={this.getDynamicContent()}
/>
</div>
);
}
}
reactjs  react  js  javascript  computing  listener  click  onclick  element  subelement  sub  howto  web  dev  event  events 
april 2019 by therobyouknow
Working With Events in React | CSS-Tricks
might help event though jsx to understand things
events  react  reactjs  event  jsx  web  dev  computing  js  javascript 
april 2019 by therobyouknow
Lanzarote
We are a London–based multidisciplinary studio with a diverse output of creative services, from events & venue programming, brand identity & strategy, food consultancy, interiors, digital and more.
London  agency  multidisciplinary  studio  diverse  creative  services  events  venue  brand  identity  branding  brandidentity  strategy  food  consultancy  interior  digital 
december 2013 by therobyouknow

Copy this bookmark:





to read