REACT - HANDLE EVENTS

index.html

<div id="root"></div>

react-handle-events.markdown

REACT - HANDLE EVENTS

A Pen by ThiaguinhoLS on CodePen.

License.

script.babel

function ActionLink(props) {
  
  function handleClick(e) {
    e.preventDefault();
    console.log("Link clicked");
  }
  
  return (
    <a href="#" onClick={ handleClick }>
      Click here!  
    </a>
  );
}

class Toggle extends React.Component {
  
  constructor(props) {
    console.log("call");
    super(props);
    this.state = { isToggleOn: true };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e) {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
  
  render() {
    return (
      <button onClick={ this.handleClick }>
        { this.state.isToggleOn ? "ON" : "OFF" }
      </button>
    );
  } 
  
}

ReactDOM.render(
  <Toggle />,
  document.getElementById("root");
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>