Реактивные операции над массивами в React
Давайте теперь научимся делать реактивные
манипуляции с элементами массива.
Для этого мы на каждую li
навесим обработчик события, в
которой параметром будем
передавать номер этой li
в массиве:
function 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>;
}
Внутри нашей функции мы можем совершить любую операцию над нашим элементом массива:
function App() {
...
function doSmth(index) {
let copy = Object.assign([], notes);
copy[index] += '!'; // что-то сделаем с элементом
setNotes(copy);
}
}
Дан массив с числами. Выведите его
в виде списка ul. По клику
на любую li возведите ее
число в квадрат.
В конце каждой li сделайте кнопку,
по нажатию на которую эта li будет
удаляться из списка.
Дан инпут. По клику на любую li сделайте
так, чтобы текст этой li попал
в инпут.
Модифицируйте предыдущую задачу так,
чтобы по потери фокуса инпута измененный
текст попадал в соответствующую li.
Дана кнопка. По клику на эту кнопку
переверните порядок li на обратный.