I've been taking a series of tutorials on youtube on React web apps. All is fine but when I try to get the double click handle to work. Anyone that can help me out? This is the code
<main>
<p onDoubleClick={handleClick}>
Hello {handleNameChange()}!
</p>
<button onClick={handleClick}>Click It</button>
<button onClick={() => handleClick2('Dave')}>Click It</button>
<button onClick={(e) => handleClick3(e)}>Click It</button>
</main>
All the buttons work, but the double click part of the code don't register anything when I look at the console in chrome development tools. Anyone that has an idea on what is wrong?
And, the handleNameChange function works (it just display a random name) but the idea with the excercise is to make the name doublecklickable.
I have looked at the code for typos, rewritten the code from scratch - I need a hint about what is wrong with the code
Don't use onDoubleClick. Instead, use e.detail to get the number of clicks.
<button onClick={(e) => {
if (e.detail === 2) handleDoubleClick()
}}>
"Click me"
</button>
There is a similar thread here with great explanations as to why you aren't getting the results you expect from onDoubleClick().
Related
so i have a form component having button array,
though i used icons in it with value attribute. just like below.
<button value={'admin'} onClick={(e)=> handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
in handleClick function e.target.value is returning icon instead of admin.
Thanks in advance 😄💗.
I tried to pass e as parametter and use its value in function but still same.
Can you please elaborate or share more code with us. Cause I tried your given code and it's working fine. I am getting 'admin' as the output.
<div className='App'>
<button value={'admin'} onClick={(e)=> console.log(e.target.value)}>
Click
</button>
</div>
Try this:
<button value={'admin'} onClick={e => handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
You're not supposed to use parenthesis around "e".
You can use e.currentTarget.getAttribute("value") method to get the admin value assigned to the button.
CodeSandbox code reference
Difference b/w e.target and e.currentTarget - difference-between-e-target-and-e-currenttarget
In my previous question, after I got the toggle working, I asked if there was a way I could keep it there, to which the person who answered my question told me to use local storage.
As far as the refresh problem goes, React doesn't persist data across
refreshes. You could use sessionStorage to do this for example, but I
think that would fit better as a separate question if you don't figure
it out.
...Or use localStorage if you don't want the data to be cleared when
the page session ends.
Then I started researching about local storage and how to use it in React JS. I tried coding it myself, but it ended up being very complicated and my code was so messy.
The thing is, that question also had to do with my money tracker app. Basically, the text being toggled was instead a tag being toggled.
Here are some parts of the money tracker app's documentation that I wrote in my docs on novem. website:
The first bar with the cyan plus sign is called the input bar. You add in something like $8.00 - Bought a shirt, and a output bar (the
bar with the 3 buttons on the right) is what you get with what you
entered in.
A bit later...
The first one, the one with the cyan background, is the spent button. To put it simple, it toggles a tag with a cyan background that
says spent.
The second one, the button in the middle, is the earned button. It does the same thing as the spent button but instead of the words spent
it says earned.
The last one is the delete button that deletes the whole output bar.
Note: It might be better if you see the website, because it is a very short page.
React JS snippet of my code
<div className="bar-tag-container">
<li className={`todo-item ${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Earned</p>}
<div className="others">{text}</div>
</li>
</div>
<button
onClick={(() => setIsSpent(!isSpent), handleClickSpent)}
className="spent-btn"
>
<FaMoneyCheckAlt />
</button>
<button
onClick={(() => setIsReceived(!isReceived), handleClickReceived)}
className="receive-btn"
>
<FaDollarSign />
</button>
Based on the code from you previous question.
To set onClick the value of your input you can do it in a function handleClick like so :
import React, { useState } from "react";
const handleClick = () => {
setShowText(!showText)
localStorage.setItem('myText', showText);
}
const Test = () => {
const [showText, setShowText] = useState(false);
return (
<React.Fragment>
{showText && <h1>Hello World</h1>}
<button onClick={() => handleClick}>Toggle</button>
</React.Fragment>
);
};
I'm coding an application where people can make posts, and comment on them.
All of the posts are displayed on one page.
If a post is clicked the user gets routed to that post's page, which contains the full post, more details, and all of that post's comments.
Currently, I have the post div wrapped in a react-router Link. That works swell, except that when I click a button inside that div, I still get routed.
I want everywhere in the div to be "clickable", except actions like other Links or buttons.
<Link to={`/${_id}`}>
<div>
<button>I don't want this button to route</button>
</div>
</Link>
I'm not sure if there is a way to do this, but I can't find anything on it. I found one guy on another forum asking the same thing, but it was old and never got answered. Maybe I'm missing it, but I can't find it in the react-router docs. Maybe react-router is not even capable of this, idk?
Something like a quickfix but I don't know if its the best way to address this. I am looking first at the useRef but no avail.
Using something like e.preventDefault on the onClicks will probably save a lot of headache
<Link to="/">
<h1>Home</h1>
<button onClick={(e) => e.preventDefault()}>HAIYAAA</button>
</Link>
On hindsight this seems to be a Event Bubbling Issue right there.
See a fiddle here: https://codesandbox.io/s/react-router-forked-5rj2b?file=/index.js
EDIT:
Probably a much more dynamic way is to add a condition at the Link's OnClick and exclude the nested A (don't nest it otherwise React will nag you about it) and Button.
Basically we are dealing with a event bubbling here so might just use it to fine grain the behavior that we want. clicking anywhere inside the div will result to being routed to a page, while clicking any A or Button will not
<Link
to="/"
onClick={(e) => {
if (e.target !== e.currentTarget) {
if (["A", "BUTTON"].includes(e.target.nodeName)) {
e.preventDefault();
}
}
}}
>
<div>
Home
<br />
<button}>
HAIYAAA Don't Route me
</button>
<br />
<a href="#">
This is a link that is nested (Its not good to nest a!)
</a>
</div>
</Link>
Fiddle here: https://codesandbox.io/s/react-router-forked-4m4ww?file=/index.js
PS : ahh I spent time to learn something. Thanks for making my afternoon not a sleepy one
We need to stop the propagation of onClick event of the child to its parent.
<Link to="/">
<h1>Home</h1>
<button onClick={(e) => {
myNeededBehaviour();
e.stopPropagation();
}}>
HAIYAAA
</button>
</Link>
so, the stopPropagation will stop the event from propagating to its parent, and it will still calls myNeededBehaviour(); if you want, but the parent wont get the child's event. so it wont route, as it is not getting triggered.
I am using React-swipe for a project. I follow the main example.
<div>
<ReactSwipe
className="carousel"
swipeOptions={{ continuous: false }}
ref={el => (reactSwipeEl = el)}
>
<div>PANE 1</div>
<div>PANE 2</div>
<div>PANE 3</div>
</ReactSwipe>
<button onClick={() => reactSwipeEl.next()}>Next</button>
<button onClick={() => reactSwipeEl.prev()}>Previous</button>
</div>
But the result is that PANE1, PANE2, PANE3 all takes up the whole screen width. I want all PANE1, PANE2 and PANE3 have 60vw so that you see PANE1 and part of PANE2. What I want is Facebook like mobile carousel which is somehow like the following:
https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js
Thank you.
In src/components, change flex-basis property of CarouselSlot from 80% to something like 50%. And if you want to change the starting point of the visible slides, you can play with transform property of CarouselContainer.
I am using React and Redux. At some point, I have a Link, and I would like to add a delay to this Link before changing the route.
render(){
return(
<div>
<h3>New note for {this.props.match.params.user}</h3>
<input placeholder="Your note" onChange = {(e)=>this.handleChange(e)}/>
<Link to={`/board/${this.props.match.params.user}`} >
<br/>
<button onClick={(e) => {this.validateNote()}}>Add this now !</button>
</Link>
</div>
);
}
How can I do that ?
As #shubham-khatri wrote in the comments, I would definitely use a programmatic way to navigate instead of a Link component.
Have a look here.
To answer the specific problem, as you already have a button inside the link, i would use it's callback to change the routing.
<button onClick={(e) => {this.validateNote(); this.props.history.push(`/board/${this.props.match.params.user}`);}}>Add this now !</button>
If we're already talking, I wouldn't recommend you the use an anonymous function as a callback to the onClick because that way you create a new function each render.
Try to read about it here