0

Como eu faço para pegar um parâmetro de uma função e usar para pegar uma variável? Por exemplo, nesse código:

import React, { Component } from 'react';

export default class Home extends Component {
  state = {
    name: 'joao',
    age: 18
  }
  set = (s, v) => {
    this.setState({s: v})
  }
  get = (s) => {
    return this.state.s;
  }
  render() {
    return(
      <div>
        <button onClick={() => this.set('name', 'maria')}>Mudar Nome</button>
        <button onClick={() => this.set('age', 20)}>Mudar Idade</button>
        {this.get('name')}
        {this.get('age')}
      </div>
    );
    };
}

Eu queria passar no get('name') e na função get fazer algo como: return this.state.name; Mas não retorna isso, parece que ele usa só o s

Como fazer isso? Qual nome disso? (esse código eu fiz só para exemplo mesmo)

2 Respostas 2

1

Se você mudar o seu método set para

set = (s, v) => {
    this.setState({
        [s]: v
    })
}

(note os [] envolvendo a chave s) você deve atingir o seu objetivo. Isso chama-se Computed property names

3
  • Exatamente isso o que eu precisava, mas isso só funcionou no set, no get deu problema de: ./src/pages/home/index.js Line 19: Parsing error: Unexpected token 17 | } 18 | get = (s) => { > 19 | return this.state.[s]; | ^ 20 | } 21 | // template 22 | render() {
    – rogomazagu
    Commented 26/02/2019 às 14:40
  • Como você escreveu o get? Commented 26/02/2019 às 14:52
  • hastebin.com/oqerulexol.js
    – rogomazagu
    Commented 28/02/2019 às 19:47
0

Nesse seu caso dá pra fazer assim:

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "João",
      age: 18
    };
  }

  handleName = e => {
    this.setState({
      name: e.target.dataset.name
    });
  };

  handleAge = e => {
    this.setState({
      age: e.target.dataset.age
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleName} data-name="Marcelo">
          Mudar Nome
        </button>
        <button onClick={this.handleAge} data-age="22">
          Mudar Idade
        </button>
        {this.state.name}
        {this.state.age}
      </div>
    );
  }
}

React.render(<Home />, document.getElementById("root"));

Atualizei o código.

1
  • Obrigado pela resposta diego, te dei um + Mas esse código foi só para exemplificar mesmo, a questão é como passar por parametro um S, e nesse S transformar na variavel que eu preciso, sem precisar fazer desse jeito ou ter que fazer algo como: get = (s) => { if(s == 'name') return this.state.name; else if(s == 'age') return this.state.age; }
    – rogomazagu
    Commented 8/02/2019 às 17:06

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 .