Дар 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]