React - Umgang mit User Interaktionen (Events)

Die Beispiele sollen lediglich den Umgang mit User Aktionen wie einem Klick auf einen Button zeigen. Typische Namenskonventionen sind handleClick, handleOnChange, clickHandler.

Beispiel User Authentifizierung

export const user = {
  email: '',
  password: '',
  loggedIn: false,
};

function App() {

  function handleClick(){
    user.email = 'test@email.de';
    user.password = 'TopSecret';
    user.loggedIn = true;
    console.log(user);
  }

  return (
    <div id="app">
      <h1>User Login</h1>
      <p>
        <label>Email</label>
        <input type="email" />
      </p>

      <p>
        <label>Password</label>
        <input type="password" />
      </p>

      <p id="actions">
        <button onClick={handleClick}>Login</button>
      </p>
    </div>
  );
}

export default App;

Beispiel Erstellung User (Übergabe eines Wertes an Funktion)

function App() {
  function handleCreateUser1(name) {
    user.name = name;
    console.log(user.name);
  }

  const handleCreateUser = (name) => {
   console.log("Test")
  }
  return (
    <div id="app">
      <h1>User Login</h1>
      <p>
        <label>Name</label>
        {/* You don't need to do anything with this input! You'll learn how to handle user input later */}
        <input type="text" />
      </p>

      <p id="actions">
      {/* 
      handleCreateUser("Max Mustermann") will call when rendering, so not only when on onClick
      */}
        <button onClick={()=> handleCreateUser("Max Mustermann")}>Create User</button>
      </p>
    </div>
  );
}