VERWENDUNG VON JAVASCRIPT-SCHLÜSSEN IN REACT

Ein Closure ist eine Javascript-Funktion, bei der eine Funktion, eingeschlossen in einer anderen Funktion (äußere Funktion), zurückgegeben und außerhalb der äußeren Funktion aufgerufen wird.

Ein Abschluss wird gebildet, wenn die innere Funktion den Zugriff auf Variablen außerhalb ihres Geltungsbereichs, auch bekannt als lexikalischer Geltungsbereich, aufrechterhält. Zugriff auf Variablen und Argumente der äußeren Funktion, auch nachdem die äußere Funktion ausgeführt wurde.

Lassen Sie uns eine Steuerrechner-Abschlussfunktion erstellen, um Steuern für alkoholische und alkoholfreie Getränke basierend auf ihren Steuersätzen zu berechnen.

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

Wie Sie sehen können, merkt sich jedes Getränk immer seinen Steuersatz, basierend darauf, ob es sich um ein alkoholisches oder alkoholfreies Getränk handelt, d Funktion taxCalculator wurde ausgeführt.

In React js, der JavaScript-UI-Bibliothek, werden Event-Handler als solche inline auf dem JSX deklariert.

<button  onClick={handleClick}>Click me</button> 

Wenn der Event-Handler ein Argument hat, wird es dann innerhalb einer Funktion als solche aufgerufen.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

Beachten Sie, dass die handleAction durch eine Pfeilfunktion gekapselt wird, wenn Sie sie dem Onclick-Ereignishandler zuweisen.

Mit der Schließung können wir einfach handleAction mit einem Aktionsargument aufrufen und dann eine innere Funktion zurückgeben, die das Aktionsargument erfasst und die restlichen Aktionen auf diese Weise ausführt.

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

Beachten Sie, wie wir handleAction direkt beim OnClick-Ereignis aufrufen? Beachten Sie auch, dass wir die Funktion handleAction umgestaltet haben, sodass sie eine Funktion zurückgibt, die die erforderlichen Aktionen mit einem Schalter ausführt ?

Die handleAction wird aufgerufen, wenn die Komponente gemountet wird. Ein Abschluss erfolgt, wenn die von handleAction zurückgegebene Funktion den Wert des Arguments auf handleAction erfasst und beibehält, obwohl es (handleAction) beim ersten Rendern ausgeführt wurde.
Es ist eine nette Möglichkeit, Ereignisse in Javascript zu verarbeiten. Was denken Sie?

Das obige ist der detaillierte Inhalt vonVERWENDUNG VON JAVASCRIPT-SCHLÜSSEN IN REACT. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!