Reaktiewe operasies op skikkings in React

Laat ons nou leer hoe om reaktiewe manipulasies met skikkingselemente te doen. Vir hierdie doel sal ons op elke li 'n gebeurtenishandler plaas, waarin ons as parameter die nommer van hierdie li in die skikking sal deurgee:

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

Binne ons funksie kan ons enige operasie op ons skikkingselement uitvoer:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // doen iets met die element
    setNotes(copy);
  }
}

Задание 1

Daar is 'n skikking met getalle. Vertoon dit in die vorm van 'n lys ul. Met 'n klik op enige li, verhef die getal daarin tot die tweede mag.

Задание 2

Maak aan die einde van elke li 'n knoppie, waarmee, wanneer daarop gedruk word, hierdie li uit die lys verwyder sal word.

Задание 3

Daar is 'n invoerveld. Met 'n klik op enige li, sorg daarvoor dat die teks van hierdie li in die invoerveld verskyn.

Задание 4

Wysig die vorige taak sodat, wanneer die invoerveld fokus verloor, die veranderde teks in die ooreenstemmende li verskyn.

Задание 5

Daar is 'n knoppie. Met 'n klik op hierdie knoppie, keer die volgorde van die li-elemente om.