InputsEvents and mouseEvents in React

App.js

import React, { Component } from 'react';

import InputEvents from './events/InputEvents';
import MovementEvents from './events/MovementEvents';
import './events/Events.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <InputEvents />
        <MovementEvents />
      </div>
    );
  }
}

export default App;

Events.css

body {
  background-color: #e6f3ff;
  margin-bottom: 150%;
}

section {
  position: relative;
  overflow: hidden;
  padding: 60px 20px 20px;
  border-radius: 5px;
  background-color: #fff;
  margin: 30px 40px;
  box-shadow: 0 10px 40px -14px rgba(135, 144, 158, 0.6), 0 10px 40px -10px rgba(135, 144, 158, 0.6);
}

input, button {
  border: 1px solid #aaa;
  padding: 5px;
  font-size: 16px;
  margin-bottom: 10px;
  border-radius: 4px;
}

label {
  display: block;
}

button {
  background-color: rgba(80, 103, 124, 0.73);
  border-color: #7b90a1;
  color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}

input[type='text'] {
  box-shadow: inset 1px 1px 1px #ccc;
}

input[type='text'] + button[type='submit'] {
  margin-left: 10px;
}

h3 {
  background-color: rgba(80, 103, 124, 0.73);
  margin-top: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #fff;
  padding: 10px 20px;
}

p {
  /* margin: 0; */
}

p:first-of-type {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

span.error {
  display: block;
  color: #f00;
}

InputEvents.js

import React, { Component } from 'react';

class InputEvents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mouseDown: false,
      mouseClicked: 0,
      inputText: 'Hello world',
      formInputText: 'Hello world 2',
    };
    this.handleOnClick = this.handleOnClick.bind(this);
    this.handleOnMouseDown = this.handleOnMouseDown.bind(this);
    this.handleOnMouseUp = this.handleOnMouseUp.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
    this.handleOnSubmit = this.handleOnSubmit.bind(this);
  }
  handleOnClick() {
    console.log(this.state.mouseClicked);
    // Wrong, When we use current state for get the next state is not good practice
    // this.setState({
    //   mouseClicked: this.state.mouseClicked + 1,
    // });
    //Right
    this.setState(prevState => {
      return {
        mouseClicked: prevState.mouseClicked + 1,
      };
    });
  }

  handleOnMouseDown() {
    this.setState({
      mouseDown: true,
    });
  }
  handleOnMouseUp() {
    this.setState({
      mouseDown: false,
    });
  }
  handleOnChange(e) {
    this.setState({
      inputText: e.target.value,
    });
  }

  handleOnSubmit = e => {
    e.preventDefault();
    this.setState({
      //note on submmit formInputTextSubmitted is added to the state Object
      formInputTextSubmitted: this.state.formInputText,
    });
  };

  render() {
    return (
      <>
        {/* Buttons  */}
        <section>
          <h3>Mouse events:</h3>
          <button
            onClick={this.handleOnClick}
            onMouseDown={this.handleOnMouseDown}
            onMouseUp={this.handleOnMouseUp}
          >
            Click me
          </button>
          <p>
            Button mouse down:{' '}
            {this.state.mouseDown ? 'true' : 'false'}
          </p>
          <p>Button clicked: {this.state.mouseClicked}</p>
        </section>

        {/* Input Changes Events */}
        <section>
          <h3>Input change events:</h3>
          <input
            type="text"
            value={this.state.inputText}
            onChange={this.handleOnChange}
          />
          <p>Input value: {this.state.inputText}</p>
        </section>

        {/* Input Form Events */}
        <section>
          <h3>Form Submit events:</h3>
          <form onSubmit={this.handleOnSubmit}>
            <input type="text" value={this.state.formInputText} />
            <button type="submit">Submit</button>
            <p>Input value: {this.state.formInputText}</p>
            <p>
              Submitted value: {this.state.formInputTextSubmitted}
            </p>
          </form>
        </section>
      </>
    );
  }
}

export default InputEvents;

MovementEvents.js

import React, { Component } from 'react';

class MovementEvents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mousePositionX: 0,
      mousePositionY: 0,
      windowScrollY: 0,
    };
  }
  // from the browser event scroll
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    this.setState({
      windowScrollY: Math.floor(window.scrollY),
    });
  };

  handleOnMouseMove = e => {
    this.setState({
      mousePositionX: e.nativeEvent.offsetX,
      mousePositionY: e.nativeEvent.offsetY,
    });
  };

  render() {
    return (
      <>
        <section>
          <div onMouseMove={this.handleOnMouseMove}>
            <h3>Mouse Position:</h3>
            <p>x: {this.state.mousePositionX}</p>
            <p>y: {this.state.mousePositionY}</p>
          </div>
        </section>

        <section>
          <div>
            <h3>Window Scroll Position:</h3>
            <p>y: {this.state.windowScrollY}</p>
          </div>
        </section>
      </>
    );
  }
}

export default MovementEvents;