get clicked button's name

Question

I have the following button with event attached:

<button className="pull-right btn btn-success" onClick={this.onNextStep}>Next</button>

OnNextStep:

onNextStep: function (e) {
    ...
}

How do I get the button name inside onNextStep?

e.target.value is not working

And how do I change it?

@MatthewDarnell Are you sure? MDN (and functioning code) seem to think otherwise, e.g., https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value, http://stackoverflow.com/q/5701831/438992) *This* button doesn't, but I'm pretty sure they *can*. — Dave Newton, Feb 29 '16 at 21:03
I realize OP is using React, but this question has nothing to do with React. — Evan Davis, Feb 29 '16 at 21:08

score 4 · Accepted Answer · answered Feb 29 '16 at 21:04

4

e.target.textContent will give you the text of the button

answered Feb 29 '16 at 21:04

rguerrettaz

836
8
12

I don't know why they give you negative rating but this worked. Thanks! – Rares Mardare Mar 01 '16 at 18:37

score 1 · Answer 2 · answered Mar 01 '16 at 02:57

I would suggest something like this:

<button
  type="button"
  className="pull-right btn btn-success"
  onClick={() => this.onNextStep('Next')}
>
  Next
</button>

Remember that React is mostly about writing to the DOM. Rarely do you read from it. (The exception being inputs.)

Your "value" is just a static piece of text. There is no need to get what you've already got.

score 0 · Answer 3 · answered Feb 29 '16 at 21:07

You need a name attribute on that button name="next step" and you'll get it via e.target.name. To change it you could assign name={this.state.buttonName} and set state on that key when you need to (this.setState({ buttonName: "new button name" });). If you are talking about inner HTML as in the comment by Matthew, your button's name could be called from state <button>{this.state.name}</button> and setState could change that as well.

score 0 · Answer 4 · answered Jul 09 '23 at 13:48

0

in react you can use onClick{(e) => e.target.innerHTML }

answered Jul 09 '23 at 13:48

Mose

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 11 '23 at 09:34
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34663207) – sanitizedUser Jul 11 '23 at 23:09

get clicked button's name

4 Answers4