Witam
Problem wystąpił u mnie z dość prozaiczną rzeczą jak wyświetlanie zawartości tablicy załadowanej do useRef natomiast w rezultacie dąrzę dąŻę do efektu pobierania danych z kilku pól po użyciu przycisku, które to dane mogę się wyświetlać np poniżej w liście.
Nie jestem w stanie przekazać stałej z zawartością tablicy, więc może jakaś mała podpowiedz.
Poza tym zastanawia mnie poniższy zapis :
setNextIdx(nextIdx + 1 >= props.inputCount ? 0 : nextIdx + 1);
Jak mniemam funkcja statusu, która ustawia wartość zmiennej statusu wyznacza następny indeks przekazując go poprzez obiekt props oraz argument inputCount. Pytanie tylko czemu mają służyć ,,?" oraz to 0.
jeśli ktoś wie gdzie tego szukać byłbym wdzięczny, powiedzmy jakiś link
KOD :
import React, { useRef, useState } from "react";
function Component(props) {
const [nextIdx, setNextIdx] = useState(0);
const [inputValue, setInputValue] = useState('');
const inputEls = useRef([]);
const onButtonClick = (idx) => {
inputEls.current[nextIdx].focus();
// Find the new next index.
//Ustawienie nowego indeksu z pomoca obiektu useState poprzez obiekt props oraz argument input count
setNextIdx(nextIdx + 1 >= props.inputCount ? 0 : nextIdx + 1);
const listOfItems = inputEls.map(items => {
return <li>{items}</li>
});
};
/*
<div>
<Component inputCount={5} />
</div>
*/
return (
<>
{Array(props.inputCount)
.fill()
.map((_, idx) => (
<input
ref={(el) => (inputEls.current[idx] = el)}
type="text"
style={{ display: "block", marginBottom: "0.5rem" }}
/>
))
}
<button onPress={onButtonClick}>Tab through inputs</button>
<ul>{listOfItems}</ul>
</>
);
}
export default Component;
