Snippet

Verwaltung dynamischer Raster-Eingaben mit gecurryten Event-Handler-Funktionen

Das Currying von Event-Handler-Funktionen ermöglicht es, dynamische Rasterkoordinaten (Zeilen- und Spaltenindizes) im Scope eines Closures vorzubinden und einen regulären Event-Handler zurückzugeben. Verschachtelte Array.map-Aufrufe sorgen für unveränderliche State-Updates der 2D-Matrix.

snippet.js

javascript

import React, { useState } from 'react';
 
export function MatrixEditor({ rows, cols }) {
  const [grid, setGrid] = useState(() =>
    Array.from({ length: rows }, () => Array(cols).fill(''))
  );
 
  const handleCellChange = (rowIndex, colIndex) => (event) => {
    const nextValue = event.target.value;
    setGrid((prevGrid) =>
      prevGrid.map((row, r) =>
        r === rowIndex
          ? row.map((cell, c) => (c === colIndex ? nextValue : cell))
          : row
      )
    );
  };
 
  return (
    <div className="matrix-grid">
      {grid.map((row, r) => (
        <div key={r} className="matrix-row">
          {row.map((val, c) => (
            <input
              key={`${r}-${c}`}
              value={val}
              onChange={handleCellChange(r, c)}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

react

Erklärung

const handleCellChange = (rowIndex, colIndex) => (event) => {

Erstellt eine gecurryte Funktion höherer Ordnung, die die Zielkoordinaten im Closure-Scope festhält.

prevGrid.map((row, r) => r === rowIndex ? row.map(...) : row)

Führt ein unveränderliches Update im mehrdimensionalen Array durch, indem nur der betroffene Index neu erstellt wird.

onChange={handleCellChange(r, c)}

Ruft die äußere gecurryte Funktion beim Rendern auf und übergibt den exakten Zeilen- und Spalten-Listener.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwaltung dynamischer Raster-Eingaben mit gecurryten Event-Handler-Funktionen

Verwandt