Snippet

Logik-Kapselung mit benutzerdefinierten Hooks

Benutzerdefinierte Hooks ermöglichen es Ihnen, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren, wodurch Ihre Next.js-Komponenten sauber und auf die Benutzeroberfläche fokussiert bleiben.

snippet.js

javascript

import { useState } from 'react';
 
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  return { value, onChange, reset: () => setValue('') };
}
 
// Usage in Next.js component
export default function SignupForm() {
  const nameInput = useInput('');
  return <input type="text" {...nameInput} />;
}

nextjs

Erklärung

function useInput(initialValue) {

Deklariert einen benutzerdefinierten Hook, der den Status von Texteingaben verwaltet.

{...nameInput}

Verwendet den Spread-Operator, um die Props 'value' und 'onChange' an das Input-Element zu übergeben.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Logik-Kapselung mit benutzerdefinierten Hooks

Verwandt