Fazer Loop com Input em React
11/08/2021
0
Preciso adicionar inputs de acordo com o número de produtos que o cliente comprou. Porém estou tendo um pouco de dificuldade pois não estou conseguindo definir o useState para cada campo do meu loop, assim, quando eu altero um campo, todos os outros alteram juntos também. Já tentei diversas coisas, estou nisso a três dias e nada de achar uma solução, irei colocar abaixo o código de minha última tentativa. A principio estou tentar colocar elas dentro de uma Matriz, para depois conseguir colocar tudo no Banco de Dados.
Estou chamando assim:
Há alguma forma de fazer isto?
const [quantidadeUsada, SetQuantidadeUsada] = useState([]); function handleChangeQtdUsada(i, e) { var newValues = quantidadeUsada; newValues[i] = e.target.value; SetQuantidadeUsada({ values: { values: newValues } }); } const id_ProdNfe = prods.map(prod => { return prod.produtoNfe_id; }); var fieldsArray = []; for(var i = 0; i <= id_ProdNfe; i ++){ fieldsArray.push( <input type='text' value={quantidadeUsada[i]} name={quantidadeUsada[i]} onChange={this.handleChangeQtdUsada.bind(this, i)} /> ); }
Estou chamando assim:
<ul className="prods-list"> {prods.map(prod => ( <li key={prod.modeloPelicula}> <label htmlFor="peliculas">Modelo Pelicula</label> <input id="peliculas" type="text" value={prod.modeloPelicula} disabled/> <label htmlFor="quantidadeDisponível">Quantidade Disponível</label> <input id="quantidadeDisponível" type="text" value={prod.quantidadeComprada} disabled/> <div className="inputs"></div> </li> ))} </ul>
Há alguma forma de fazer isto?
João Marcelo
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)