5
respostas

Duvidas em React

Alguém poderia me ajudar com algumas duvidas em React

1- quando coloco para mostrar o state text, ele mostra certo o que digito, porem se mando mostrar o state array, ele mostra faltando, se eu digito 10 ele mostra 1.

2 - eu estou usando onChange

3- eu quero pegar o texto que esta sendo digitado no input e colocar ele dentro do array, mas ele faz o seguinte, quando eu digito 12, o array fica assim ['', '1'], e na verdade eu quero que fique assim ['12'].

4- como eu transformo o texto digitado em numero.

5 - como faço para pegar o valor de dois inputs e somar eles.

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>
    );
  }
}
5 respostas

Fala ai Daniel, tudo bem? Vamos lá:

1- quando coloco para mostrar o state text, ele mostra certo o que digito, porem se mando mostrar o state array, ele mostra faltando, se eu digito 10 ele mostra 1.

Isso pode ocorrer por conta do estado do componente ainda não ter sido atualizado, isso porque essa função é assíncrona, caso você precisa do novo estado, você pode passar uma função como segundo parâmetro para o setState, ela será chamada quando o setState terminar de processar:

this.setState({ algumaChave: 'algumValor' }, () => {
    console.log(this.state);
})

2 - eu estou usando onChange

Para input ou textarea o ideal seria utilizar a função onInput.

Basicamente a diferença é que o oninput será disparado quando o conteudo de algum elemento mudar através da interface.

Já o onchange será disparado quando a seleção, check ou o conteudo tem sido mudado não via interface.

eu quero pegar o texto que esta sendo digitado no input e colocar ele dentro do array, mas ele faz o seguinte, quando eu digito 12, o array fica assim ['', '1'], e na verdade eu quero que fique assim ['12'].

Nesse caso você pode em vez de fazer o push, sempre cria um array com o conteudo do campo, algo assim:

this.setState({
      notas: [e.target.value],
});

4- como eu transformo o texto digitado em numero.

Para isso você pode usar a funções parseInt ou parseFloat.

5 - como faço para pegar o valor de dois inputs e somar eles.

Nesse caso tu adiciona um onInput para cada input, adiciona cada valor em um estado e na hora de renderizar junta eles, algo assim:

<h1>{`${this.state.campo1} ${this.state.campo2}`}</h1>

Espero ter ajudado.

Obrigado Matheus,

Então o que eu preciso fazer e estou bem perdido e criar 4 inputs em tela , aonde a pessoa entra com a nota de cada matéria.

Depois você soma as notas e divide por 4, se for maior que 60 aprovado, menor reprovado.

O que eu quero fazer é jogar o valor digitado dentro do array, para depois somar, porem se eu digitar 80, tanto com OnChange e OnInput, ele deixa o array assim: ['8', '80'], porem isso acontece se eu uso:

const array = [...this.state.notas, this.state.text]

tem uma alguma forma de fazer o array ficar : array = ['80']

Uma forma que consegui mas não sei se é a certa foi essa, porem ai tenho outro problema. Eu consegui agora deixar o valor digitado certo dentro do array, porem quando digita na segundo input ele salva em na posição zero do array tb e apaga o anterior.

Eu queria deixar da seguinte forma:

input 1 = valor digitado 40

input 2 = valor digitado 10

array ['40', '10']

E para deixar o valor como numero eu faço o parseInt, mas em qual parte posso usar ele, dentro do state ou na função?

Vou deixar o esboço do código que fiz se puder me ajudar. Obrigado

import React, { Component } from "react";

export default 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.text]
        this.setState({
          notas: array
        }, () => {
          console.log(this.state.notas);
        });
      });
    };

    render() {
      return (
        <div>
          <input type="text" name="text" onChange={this.input} /> <br/><br/>
          <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>
      );
    }
  }

Fala ai Daniel, vamos lá:

tem uma alguma forma de fazer o array ficar : array = ['80']

O que eu recomendo seria você ter quatro estados internos no componente de forma separada, algo assim:

this.state = {
    campo1: '',
    campo2: '',
    campo3: '',
    campo4: '',
};

(Mude o nome dos campos para algo que seja mais semântico).

E depois você soma as notas de forma separada:

const nota1 = parseFloat(this.state.campo1)
const nota2 = parseFloat(this.state.campo2)
const nota3 = parseFloat(this.state.campo3)
const nota4 = parseFloat(this.state.campo4)
const resultado = nota1 + nota2 + nota3 + nota4

Espero ter ajudado.

Fala Matheus,

Obrigado, agora deu cero,

muito obrigado mesmo.

Magina Daniel, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software