CODEWITHSUNDEEP
reactjs
Tong Liu
Tong Liu

Reputation: 3

How to pass the specific element to function in react

I just started learning React by myself so my code is probably really bad but please bear with it. I'm trying to reuse this part of my code which is a counter

<div>
    <button type="button" className="less"><img className="button" src={Minus} alt="" onClick={this.minusItem.bind(this)}/></button>
    <input type="text" name="" id="count" defaultValue="3"/>
    <button type="button" className="more"><img className="button" src={Plus} alt="" onClick={this.addItem.bind(this)}/></button> 
</div>

and I just cannot figure out what is 'this' that I'm passing back. I want to pass back the element that I clicked and find the corresponding input element so that I can update the number. Here is the code of minusItem function

minusItem = (el) => {
    var c = //get the corresponding input element from el
    if (c.val() > 1) {
        c.val(c-1);
    }
}

I tried to search for the answer but I couldn't find it anywhere and this is my first time posting here, so sorry in advance if I'm not explaining things clearly or posting in a right format

Upvotes: 0

Views: 35

Answers (1)

rubentd
rubentd

Reputation: 1275

The this you're referencing on the onClick handler is the React Component. To reference dom elements in general you can use refs:

https://reactjs.org/docs/refs-and-the-dom.html

also, the onClick handler will receive the event as parameter, and you can reference the dom element that called the event by using event.target

clickHandler = (event) => {
  console.log(event.target); // dom element
}

Upvotes: 1

Related Questions