Events using React Js

Question

<body>
  <button id="btnId">Click Me!</button>
</body>

I have this html code above and I want to add a click event on the button with the id "btnId" using react js...how will i do that without updating that button...

by using class ex. class Sample extends React.Component{render(){ return(<button onClick={this.someFunction}>Click</button>)}} — Kreeshian Alvir Gutierrez
– Kreeshian Alvir Gutierrez, Commented Jul 23, 2018 at 8:15
Please EDIT your question and add more details to it instead of posting comments to your own question. Thanks — sɐunıɔןɐqɐp
– sɐunıɔןɐqɐp, Commented Jul 23, 2018 at 8:18
@KreeshianAlvirGutierrez you can use addEventListener just like in vanilla javascript inside componentDidMount(). — Chris
– Chris, Commented Jul 23, 2018 at 8:20
@Chris I got it, thank you for the answer I thought that componentDidMount() was used for making api calls. — Kreeshian Alvir Gutierrez
– Kreeshian Alvir Gutierrez, Commented Jul 23, 2018 at 8:37

Arun Yokesh · Accepted Answer · 2018-07-23 09:34:25Z

1

You can bind events in 2 ways

1. https://stackoverflow.com/a/51474887/4270123

2. Here is the example

class Button extends React.Component {

 handleClick(e) {
   e.preventDefault();
   console.log(e.target.id);
   alert("#" + e.target.id + " is clicked"); 
 }

 render() {
   return (
     <button onClick={ (e) => this.handleClick(e) } id="btnId">
       Click Me!
     </button>
   );    
  }
}

answered Jul 23, 2018 at 9:34

Arun Yokesh

1,35417 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marmeladze · Accepted Answer · 2018-07-23 08:51:18Z

0

Below code might give you an idea.

class Button  extends React.Component {

 constructor(props) {
    super(props);
    this.handleChange = this.handleClick.bind(this);
 }

 handleClick(e) {
   e.preventDefault();
   alert("I am clicked"); 
 }

 render() {
   return (
     <button onClick={this.handleClick}>
       Click Me!
     </button>
   );    
  }
}

answered Jul 23, 2018 at 8:51

marmeladze

6,5863 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

Events using React Js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related