Binda inmatningar till en array i React

Låt tillståndet notes innehålla en array:

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

Låt oss också ha en hjälpfunktion som beräknar summan av arrayelement:

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

function App() {
  ...
}

Låt oss beräkna och visa summan av elementen i vår array från tillståndet, med hjälp av vår hjälpfunktion:

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

Låt oss nu skapa tre inmatningar och i value för varje inmatning skriva ett av arrayelementen:

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

Låt oss nu lägga till händelsen onChange till våra inmatningar. Vi ska göra en gemensam hanteringsfunktion för denna händelse:

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

Som du ser tar funktionen changeHandler som första parameter numret på det arrayelement som denna inmatning redigerar.

Med detta nummer kan vi ersätta arrayelementet med innehållet i inmatningen.

Låt oss göra detta:

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

Nu kommer det att vara möjligt att redigera vilken inmatning som helst, samtidigt som arrayen reaktivt ändras och följaktligen räknas summan av dess element om.

Låt oss samla all vår kod tillsammans:

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

Det är möjligt att göra så att inmatningar genereras i en loop:

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]