React - onClick events

Question

//React - onClick and alert

class Square extends React.Component {
  render() {
    return (
​     //using arrow function syntax
      <button className="square" onClick={() => alert('click')}>
      //equivelant to
      //<button className="square" onClick={function() {alert ('i get clicked'); }}>
        {this.props.value}
      </button>
    );
  }
}

 

Answer 1

class TransactionCategoryResultsComponent extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    value: 0,
    message: 'default click state',
};

onClick = () => {
  this.setState({
    value: this.state.value + 1
  });
  
  this.setState({
    message: `click-state ${this.state.value}`
  });
}

render() {
return (
<div className="testtest">
  <div>render->state={this.state.value} - 
    {this.state.message}
  </div>
  <button onClick={this.onClick}>Click </button>
</div>

 

Answer 2

// Listening to events

class DisplayAlert extends Component {
  DisplayAlert() {
    alert("Alert here!");
  }

  render() {
    return <button onClick={this.DisplayAlert}>show alert</button>;
  }
}

export default DisplayAlert;

const rootElement = document.getElementById("root");
ReactDOM.render(<ShowAlert />, rootElement);

 

Answer 3

// use class fields to correctly bind callbacks

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
  
  // ref. from: https://reactjs.org/docs/handling-events.html

 

Answer 4

// Binding in render()

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class ChangeInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
  }

  changeText(event) {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <div>
        <label htmlFor="name">Enter Text here </label>
        <input type="text" id="name" onChange={this.changeText.bind(this)} />
        <h3>{this.state.name}</h3>
      </div>
    );
  }
}

export default ChangeInput;

const rootElement = document.getElementById("root");
ReactDOM.render(<ChangeInput />, rootElement);

// ref: https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd

 

Answer 5

// Binding in constructor()

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class ChangeInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };

    this.changeText = this.changeText.bind(this);
  }

  changeText(event) {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <div>
        <label htmlFor="name">Enter Text here </label>
        <input type="text" id="name" onChange={this.changeText} />
        <h3>{this.state.name}</h3>
      </div>
    );
  }
}

export default ChangeInput;

const rootElement = document.getElementById("root");
ReactDOM.render(<ChangeInput />, rootElement);

 

Answer 6

// Binding with arrow function

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class ChangeInput extends Component {
  handleEvent = event => {
    alert("I was clicked");
  };

  render() {
    return (
      <div>
        <button onClick={this.handleEvent}>Click on me</button>
      </div>
    );
  }
}

export default ChangeInput;

const rootElement = document.getElementById("root");
ReactDOM.render(<ChangeInput />, rootElement);

// ref: https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd

 

Answer 7

const TwitterShare = () => {
  window.open('http://twitter.com/share?url='+window.location.href,+'targetWindow','height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes');
  };

<a target='_blank' onClick={TwitterShare}><img className="mb-3" src={TwitterIcon} alt="property" /></a>

 

Answer 8

<button
  className="btn secondary-grey enquire-button"
  type="button"
  onClick={e => openModal(e, false)}
>
  {enquireBtnTxt}
</button>