Σύνδεση πεδίων εισόδου με πίνακα στο React

Ας υποθέσουμε ότι στην κατάσταση notes αποθηκεύεται ένας πίνακας:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    
  </div>;
}

Ας υποθέσουμε ότι έχουμε επίσης μια βοηθητική συνάρτηση, που βρίσκει το άθροισμα των στοιχείων του πίνακα:

jsxfunction getSum(arr) {
  let sum = 0;
  
  for (const elem of arr) {
    sum += +elem;
  }
  
  return sum;
}

function App() {
  ...
}

Ας βρούμε και ας εμφανίσουμε το άθροισμα των στοιχείων του πίνακα μας από την κατάσταση, χρησιμοποιώντας για αυτό τη βοηθητική μας συνάρτηση:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    {getSum(notes)}
  </div>;
}

Ας δημιουργήσουμε τώρα τρία πεδία εισόδου και στο value κάθε πεδίου εισόδου θα γράψουμε ένα από τα στοιχεία του πίνακα:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    <input value={notes[0]} />
    <input value={notes[1]} />
    <input value={notes[2]} />
    
    {getSum(notes)}
  </div>;
}

Ας προσθέσουμε τώρα συμβάν onChange στα πεδία εισόδου μας. Ταυτόχρονα, ας δημιουργήσουμε μία κοινή συνάρτηση-χειριστή αυτού του συμβάντος:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    // κοινή συνάρτηση-χειριστής
  }
  
  return <div>
    <input value={notes[0]} onChange={event => changeHandler(0, event)} />
    <input value={notes[1]} onChange={event => changeHandler(1, event)} />
    <input value={notes[2]} onChange={event => changeHandler(2, event)} />
    
    {getSum(notes)}
  </div>;
}

Όπως βλέπετε, η συνάρτηση changeHandler ως πρώτη παράμετρο δέχεται τον αριθμό του στοιχείου του πίνακα που επεξεργάζεται αυτό το πεδίο εισόδου.

Με βάση αυτόν τον αριθμό μπορούμε να αντικαταστήσουμε το στοιχείο του πίνακα με το περιεχόμενο του πεδίου εισόδου.

Ας το κάνουμε αυτό:

jsxfunction changeHandler(index, event) {
  setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

Τώρα θα είναι δυνατή η επεξεργασία οποιουδήποτε πεδίου εισόδου, ενώ ταυτόχρονα ο πίνακας θα αλλάζει αντιδραστικά και, κατά συνέπεια, θα υπολογίζεται ξανά το άθροισμα των στοιχείων του.

Ας συγκεντρώσουμε όλο τον κώδικά μας μαζί:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
  }
  
  return <div>
    <input value={notes[0]} onChange={event => changeHandler(0, event)} />
    <input value={notes[1]} onChange={event => changeHandler(1, event)} />
    <input value={notes[2]} onChange={event => changeHandler(2, event)} />
    
    {getSum(notes)}
  </div>;
}

Μπορούμε να τα κάνουμε έτσι, ώστε τα πεδία εισόδου να δημιουργούνται σε βρόχο:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
  }
  
  const result = notes.map((note, index) => {
    return <input
      key={index}
      value={note}
      onChange={event => changeHandler(index, event)}
    />;
  });
  
  return <div>
    {result}
    {getSum(notes)}
  </div>;
}

jsx[1, 2, 3, 4, 5, 6, 7, 8, 9]