CODEWITHSUNDEEP
javascriptreactjs
Rares Mardare
Rares Mardare

Reputation: 273

get clicked button's name

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?

Upvotes: 1

Views: 4047

Answers (4)

Mose
Mose

Reputation: 1

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

Upvotes: 0

David L. Walsh
David L. Walsh

Reputation: 24815

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.

Upvotes: 1

camerow
camerow

Reputation: 395

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.

Upvotes: 0

rguerrettaz
rguerrettaz

Reputation: 846

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

Upvotes: 5

Related Questions