Hi I am trying to detect when a div is clicked that is nested inside of a container.
the goal is to extract the src for an image as a variable.
I want the path to the image
Would this work ?
<div className = "container">
<div onClick{divClicked()} className="column">
<img alt="" src={props.gif} className="ui image" />
</div>
</div>
divClicked() {
console.log(props.gif)
}
You cannot set an onclick like that.
<div onClick={divClicked} className="column">
this code should work if the divClicked function is in the same context.
If this function is a member of a class, you might want to use this.divClicked
Additionally if you want to pass parameters to the function you can use arrow functions to do this.
<div onClick={()=>divClicked(someParam)} className="column">
Related
I'm using a library. Once I add the component, I don't have direct access to an element with the class "marquee". But I need to add a ref to it like so: Is there anyway I can do this?
<div className="marquee-container">
<div className="marquee" ref={needARefHere}>
<img />
<img />
</div>
</div>
I call this in my code:
<Marquee />
Given an image gallery, where the user can click an image and the selected image will be shown in the gallery below it, how can I use useRef to replace the image in the gallery div with the selected image on click? The idea is that the images will be populating the gallery at the top from an array, so each image will presumably have the useRef applied to it?
HTML
<div class="wrapper">
<div class="row">
<div class="column">
<img src="imageurl" alt="water" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl2" alt="tree" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl3" alt="snow" style="width:100%" onClick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl4" alt="mountain" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl5" alt="tree2" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</div>
Function to toggle large image visibility
const myFunction = imgs => {
const imageRef = useRef();
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
The current state can be seen here: jsFiddle
As the React Docs state: Don’t Overuse Refs
Your code snippet is not what refs should be used for. In React, you should make things interactive via state changes, not by fiddling with the DOM, React is designed to do that for you.
However from that jsfiddle, it looks like you aren't even using React? I am unsure why you are using useRef at all?
UPDATE: Code fix
By using function to define your function (instead of an arrow function), it gets hoisted so your HTML elements can pick it up, and the getElementById method gets you the element reference you need.
Just replace all your js with:
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
function myFunction(imgs) {
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
...and your jsfiddle works.
How to place another div below the <div main-title>My App</div> such that the content in second div should come below the content in first div.
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
Try wrapping in another div that has display block.
Like this:
<div style="display:block;">
<div main-title>My App</div>
<div other-div>Something</div>
</div>
I have ng-repeat loop which loops collection of image items in bootstrap carousel, and each image item has id, title and imagename property. Outside ng-repeat loop I have remove button with ng-click function that accepts imageid to delete it. But, as this button is outside loop, it doesn't have access to current image in loop.
<div ng-repeat="img in images" ng-class="{'active':$first}">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
<div ng-click="remove(img.id)">
<i class="fa fa-times fa-1x"></i>
</div>
If I put remove button inside loop it works, but is it possible to keep track of current image from loop and have only one remove button outside loop, to which I can pass id of current image (image displayed on carousel).
You should use some bindings like this one: https://angular-ui.github.io/bootstrap/#/carousel - it has the active image accessible.
This is not tested, you need to adapt it to your code.
<div uib-carousel active="active">
<div uib-slide ng-repeat="img in images track by img.imagename" index="img.imagename">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
</div>
<div ng-click="remove(active)">
<i class="fa fa-times fa-1x"></i>
</div>
I only want to display the image div if the object returns an image, right now I'm outputting the image in my <div class="image">, however, if there's no image, then the <div class="image"> should not output:
<div class="image">
<img src="{{item.logo}}" alt="{{item.title}}" title="{{item.title}}" />
</div>
How about this?
<div class="image" ng-if="item">
...
</div>
See the documentation for ngIf.
You could also use ng-show, which will merely hide the div instead of removing it completely. See the documentation for ngShow.