Send two values onClick React

Question

I found this answer for sending a single value to a function onClick. Is it possible to send two? I've tried

        <button value={valueA, valueB } onClick={ () => this.toggleEditing.bind(this, valueA, valueB) } className="slds-button slds-button--icon">
        <svg className="slds-button__icon" aria-hidden="true">
          <use xlinkHref={closeIcon}></use>
        </svg>
          <span className="slds-assistive-text">Cancel</span>
        </button>

But my second argument in toggleEdit() is the mouse event.

I recommend to learn what `.bind` does: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind . — Felix Kling, Feb 09 '17 at 19:34

Mayank Shukla · Accepted Answer · 2017-02-09T19:56:05.633

Yes you can pass n no of values in onClick event, like this:

<button value={valueA, valueB } onClick={this.toggleEditing.bind(this, valueA, valueB,...) }
    className="slds-button slds-button--icon">
        <svg className="slds-button__icon" aria-hidden="true">
            <use xlinkHref={closeIcon}></use>
        </svg>
        <span className="slds-assistive-text">Cancel</span>
</button>

toggleEditing(value1, value2, ....., event){
    console.log(value1,value2,....);
}

Or use arrow function like this:

onClick={(e) => this.toggleEditing(valueA, valueB,...)}

Abdennour TOUMI · Answer 2 · 2017-02-09T19:45:06.147

0

But my second argument in toggleEdit() is the mouse event.

Thus :

  onClick={ (valueB) => this.toggleEditing(valueA, valueB) }

Instead of :

  onClick={ () => this.toggleEditing.bind(this, valueA, valueB) }

edited Feb 09 '17 at 19:45

answered Feb 09 '17 at 18:44

Abdennour TOUMI

87,526
38
249
254

The `apply` example is incorrect, it should be `this.toggleEditing.apply(this, [valueA, valueB])`. `call` is actually unnecessary and the last example is just silly (sorry). `() => this.toggleEditing(this, valueA, valueB)` would be the most reasonable thing to do. – Felix Kling Feb 09 '17 at 19:33
How you guess that `this` is the 1ˢᵗ argument of `toggleEditing` not the scope ? as you note, questioner does not disclose the logic of `toggleEditing` – Abdennour TOUMI Feb 09 '17 at 19:37
Sorry, I made a mistake in my comment. I meant to write that `() => this.toggleEditing(valueA, valueB)` would be the most reasonable solution (I forgot to remove `this`). – Felix Kling Feb 09 '17 at 19:39
great! this is what i expect – Abdennour TOUMI Feb 09 '17 at 19:42
I'm getting an error when I use the solution "Invalid left-hand side in arrow function parameters" – Tyler Zika Feb 09 '17 at 19:44

score 0 · Answer 3 · answered Feb 09 '17 at 18:58

0

Don`t mix ES5 and ES6, just use arrow function:

onClick={(e) => this.toggleEditing(valueA, valueB)}

answered Feb 09 '17 at 18:58

zhukva

11
1
2

5

*"Don`t mix ES5 and ES6"* That's difficult, since ES6 mostly consists of things that existed in ES5 :P – Felix Kling Feb 09 '17 at 19:32
Because it's difficult, we can see ugly code sometimes ;) I mean just use ES6 – zhukva Feb 09 '17 at 19:45
Why poke ES5 and ES6 topics in this answer This is the catastrophe – Abdennour TOUMI Feb 09 '17 at 19:48
*"I mean just use ES6"* And my point is that ES6 is a superset of ES5. Anything that is part of ES5 is also part of ES6. That's why a statement like "just use ES6" (instead of ES5) doesn't make sense. – Felix Kling Feb 09 '17 at 20:58
I don't argue with that fact. I vote for harmonized coding style. Sry for this chaos and off top. – zhukva Feb 09 '17 at 21:12

Send two values onClick React

3 Answers3