Пусть в стейте notes хранится массив:
function App() {
const [notes, setNotes] = useState([1, 2, 3]);
return <div>
</div>;
}
Пусть у нас также есть вспомогательная функция, находящая сумму элементов массива:
function getSum(arr) {
let sum = 0;
for (const elem of arr) {
sum += +elem;
}
return sum;
}
function App() {
...
}
Давайте найдем и выведем сумму элементов нашего массива из стейта, использовав для этого нашу вспомогательную функцию:
function App() {
const [notes, setNotes] = useState([1, 2, 3]);
return <div>
{getSum(notes)}
</div>;
}
Давайте теперь сделаем три инпута и в value
каждого инпута запишем один из элементов массива:
function 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
нашим инпутам. При этом сделаем одну общую
функцию-обработчик этого события:
function 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
первым параметром принимает номер того элемента
массива, который редактирует данный инпут.
По этому номеру мы можем заменить элемент массива на содержимое инпута.
Сделаем это:
function changeHandler(index, event) {
setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}
Теперь можно будет поредактировать любой инпут, при этом реактивно будет изменяться массив и, соответственно, пересчитываться сумма его элементов.
Давайте соберем весь наш код вместе:
function 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>;
}
Можно сделать так, чтобы инпуты формировались в цикле:
function 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>;
}
Дан следующий массив:
[1, 2, 3, 4, 5, 6, 7, 8, 9]
Выведите на экран среднее арифметическое элементов этого массива. В цикле сделайте инпуты для редактирования элементов.