1

Alguém poderia me ajudar.

São 4 inputs na tela aonde a pessoa entra com as notas. Eu estou fazendo o seguinte, pego o valor de cada input e jogo dentro de um array para somar depois.

Porem o array com OnChange e OnInput o array fica da seguinte forma:

input1 = 10 input = 20

array = ['1', '10']

Eu quero que fique assim

array = [10, 20]

Eu coloquei como text o input e quero transformar com parseInt para numérico, porem não consegui fazer ?

Pessoal, tentei explicar o melhor que pude, eu vi que já deram um -1, porem sou novo estou aprendendo, espero que o pessoal em vez de querer fechar a pergunta ou colocando -1, ajude quem está começando, espero que esteja bem explicado, eu fiz um esboço de código espero que ajude, se tiver algo errado me falem, estamos aqui para se ajudar e o feedback vale muito.

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      notas: [],
    };
  }

  input = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });

    const array = this.state.notas;
    array.push(this.state.text);

    this.setState({
      notas: array,
    });

    console.log(this.state.notas);
  };

  render() {
    return (
      <div>
        <input type="text" name="text" onChange={this.input} /> <br />
        {this.state.text} <br /><br />
        {this.state.notas.map((n, index) => {
          return <p key={index}>{n}</p>;
        })}
      </div>
    );
  }
}
8
  • Deu certo a resposta Daniel?
    – novic
    Commented 21/10/2020 às 13:51
  • Obrigado Novic ajudou sim, porem continuo com alguns problemas, eu até reformulei a questão, estou tentando fazer aqui desde ontem mas estou um pouco perdido. Mas valeu, muito obrigado.
    – daniel
    Commented 21/10/2020 às 14:00
  • Você não pode adequar a sua questão a uma nova duvida, isso aqui não é permitido
    – novic
    Commented 21/10/2020 às 14:06
  • Se tiver duvidas a mais crie um novo questionamento, como já repito isso não é válido.
    – novic
    Commented 21/10/2020 às 14:08
  • A duvida é a mesma ainda
    – daniel
    Commented 21/10/2020 às 14:08

1 Resposta 1

1

O this.setState ao ser invocado não altera o valor das variáveis do componente e mostra, tem que atualizar todo componente para que isso ocorra, mas, no segundo parâmetro pode ser escrito uma função que vai ser executado quando a variável do componente for alterada, exemplo:

this.setState({counter: counter + 1} , () => console.log(counter));

nessa linha exemplifica bem como ocorre a atualização da variável do componente, sendo por fim mostrado no console.log a sua última atualização.

No seu código algo assim resolve:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      notas: [],
    };
  }

  input = (e) => {
  
    this.setState({
      [e.target.name]: e.target.value,
    }, () => {
      const array = [...this.state.notas, this.state.text]
      this.setState({
        notas: array,
      }, () => {
        console.log(this.state.notas);
      });
    });
  };

  render() {
    return (
      <div>
        <input type="text" name="text" onChange={this.input} /> <br />
        {this.state.text} <br /><br />
        {this.state.notas.map((n, index) => {
          return <p key={index}>{n}</p>;
        })}
      </div>
    );
  }
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Se estivesse utilizando Hooks, para que isso ocorra tem que ser utilizado o useState para monitorar as mudanças.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .