Operasi Tindak Balas pada Array dalam React

Mari kita sekarang belajar melakukan manipulasi reaktif dengan elemen array. Untuk ini, kita akan melampirkan penangan acara pada setiap li, di mana kita akan menghantar nombor li ini dalam array sebagai parameter:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
  
  const result = notes.map((note, index) => {
    return <li key={index} onClick={() => doSmth(index)}>
      {note}
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Di dalam fungsi kami, kami boleh melakukan sebarang operasi pada elemen array kami:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // lakukan sesuatu dengan elemen
    setNotes(copy);
  }
}

Задание 1

Diberikan array dengan nombor. Paparkannya dalam bentuk senarai ul. Apabila diklik pada mana-mana li, kuasa duakan nombornya.

Задание 2

Di hujung setiap li, buat butang, yang apabila ditekan, li itu akan dipadamkan dari senarai.

Задание 3

Diberikan input. Apabila diklik pada mana-mana li, buat supaya teks li itu masuk ke dalam input.

Задание 4

Ubah suai tugas sebelumnya supaya, apabila input kehilangan fokus, teks yang diubah masuk ke dalam li yang sepadan.

Задание 5

Diberikan butang. Apabila diklik pada butang ini, balikkan susunan li kepada terbalik.