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
Related
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().
const [editable, setEditable] = useState([false,false,false]);
{ !editable[1] ? (
<Button variant="outlined" onClick={handleChange(1)} >EDIT </Button>
):(
<Button variant="outlined" > Other buttons </Button>
)}
Pretty simple trying to make an array of false values and then toggle between two displays no matter what I used for the tertany if gives me the bottom selection.
const handleChange=(val)=>{
if (val===1){
setEditable([true, true, true])
}
}
{ !editable[1] ? (
<Button onClick={()=>handleChange(1)} >EDIT </Button>
):(
<Button > Other buttons </Button>
)}
//You should try this, you just need to toggle values on handle change
Your code looks fine. The issue could be the fact that editable[1] is always false. Try to update the state. I am putting a little demo below.
Demo
Edit: As #mikaels-slava stated, the problem is probably caused by the onClick={handleChange(1)} part. Since you send the function, not running it. You should change it to onClick={() => handleChange(1)}.
I want to show only the paragraphs related to the selected chapter. To do this I did STATE with the selected Chapter number (the chapters are in numbers)
When I view the paragraphs in the page load it works fine.
I also want to make a list of buttons that move to the other chapters. The problem is that when I press the above buttons it does not change the STATE and I did console.log and really saw that the parameter I pass is incorrect. Where am I wrong in the code?
{allChapters.map(allChapter =>
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
handleChange = (chapNum) => {
this.setState(({ currentChapter }) => ({ currentChapter: chapNum }))
console.log('chapNum', chapNum);
};
console.log()
It is important to note: {allChapter} is mirror number (1,2,3, ...) and the problem is not in it.
With your current code, the only thing you do is to rename the default onClick event parameter to allChapter. Just do this instead:
{allChapters.map(allChapter =>
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
Btw, you should change the variable name allChapter to chapter ;)
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
By doing this, you rename the default onClick event parameter with
allChapter
Then you pass this renamed event to the handleChange. It's why, your console.log shows an event.
The correct way to pass your parameter is :
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
I need help in making the component search fire up only when a submit button is clicked or hit enter key. not as the user types.
I have set up my state and
used onValueChange method to get the value entered
made the button
state={
searchText: ""
}
......
...
onValueChange= {(e) => this.setState({searchText:e.target.value})}
<button type="button >
Search
</button>
I want my button to get that value and make the query run when hit submit or press enter.
thanks for help
You can read the docs on controlled behavior in ReactiveSearch over here. I have also implemented a small example for the above situation you check the demo here.
Just you have to do is ,
set the state (eg. showResult) as true on onClick event of the search button,
And then just add condition to the result list or result card.
Like this:
{showResult ?
(<ReactiveList
componentId="results"
dataField={selected}
size={15}
sortBy={sort}
loader={<ProductLoader />}
react={{
and: andQuery
}}
onAllData={(results, loadMoreData) => this.getProduct(results)}
/>)
: ""}
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