0

Como faço para pegar os valores de dois inputs e colocar dentro de um array com o evento onChange?

Por exemplo:

input1 = 10;
input2 = 20;

notas = [10, 20];

Segue o código:

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

  render() {
    return (
      <div>
        <label>Nota 1</label>
        <input type="text" name="text" onChange={this.input} /> <br /> <br/>

        <label>Nota 2</label>
        <input type="text" name="text" onChange={this.input} /> <br /> <br/>
        
      </div>
    );
  }
}
1
  • Alguém poderia me ajudar ?
    – daniel
    Commented 23/10/2020 às 16:13

1 Resposta 1

1

O primeiro ponto é que você precisa de algum jeito de distinguir os dois <input>s que você está utilizando, de modo a os inserir nas posições corretas do array.

Uma vez que você tenha feito isso, é só posicioná-los no array de acordo com a identificação. Algo como:

class App extends React.Component {
  constructor(props) {
    super(props);

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

  input = (e) => {
    // Mapeia cada nome para a posição (índice) do array:
    const nameToIndexMap = {
      'nota-1': 0,
      'nota-2': 1
    };
    
    const name = e.target.name;
    const val = parseInt(e.target.value || 0, 10);
    
    this.setState((prevState) => {
      // Copiamos o array:
      const copy = [...prevState.notas];
      // Modificamos o índice de acordo com o nosso mapa:
      copy[nameToIndexMap[name]] = val;
      
      return { ...prevState, notas: copy };
    });
  };

  render() {
    return (
      <div>
        <label>Nota 1</label>
        <input type="text" name="text" name="nota-1" onChange={this.input} />
        
        <br />

        <label>Nota 2</label>
        <input type="text" name="text" name="nota-2" onChange={this.input} />
        
        <pre>{JSON.stringify(this.state.notas, null, 2)}</pre>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Dá pra simplificar um pouco utilizando a nova API dos React Hooks. :)

2
  • Obrigado Luiz, me ajudou muito, obrigado mesmo. Só uma duvida, o prevState tem qual função, eu não conhecia ele ainda.
    – daniel
    Commented 24/10/2020 às 0:56
  • @daniel, o setState também pode aceitar um callback (conforme fiz nessa minha resposta). E, nesse caso, ele recebe como parâmetro o valor do estado antes da atualização ser feita. Consulte a API do React para saber mais. :) Commented 24/10/2020 às 1:00

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 .