Invoervelde aan 'n skikking bind in React

Laat daar in die toestand notes 'n skikking gestoor word:

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

Laat ons ook 'n hulpfunksie hê wat die som van die skikking se elemente vind:

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

function App() {
  ...
}

Kom ons vind en toon die som van die elemente van ons skikking vanuit die toestand, deur ons hulpfunksie te gebruik:

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

Laat ons nou drie invoervelde maak en in value van elke invoerveld een van die skikking se elemente sit:

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>;
}

Laat ons nou die gebeurtenis onChange by ons invoervelde voeg. Laat ons dit doen met een algemene hanteringsfunksie vir hierdie gebeurtenis:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    // algemene hanteringsfunksie
  }
  
  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>;
}

Soos jy kan sien, neem die funksie changeHandler as eerste parameter die nommer van daardie skikkingelement wat deur hierdie invoerveld geredigeer word.

Aan die hand van hierdie nommer kan ons die element van die skikking vervang met die inhoud van die invoerveld.

Laat ons dit doen:

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

Nou kan enige invoerveld geredigeer word, en die skikking sal reaktief verander en dienooreenkomstig sal die som van sy elemente herbereken word.

Laat ons al ons kode saamstel:

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>;
}

Daar kan gedoen word sodat die invoervelde in 'n lus gegenereer word:

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]