1

Pode parecer uma pergunta repetida, mas os exemplos que achei estão complicados e precisam de um array pré definido, eu não possuo isso, gostaria de saber qual a forma mais simples de adicionar um elemento ao DOM com React, já sabendo que não é como o jQuery e devo mudar o estado do componente.

Update 1: Estou adicionando código para explicar ao Marcelo melhor o meu problema.

<tr>
  <td>
    <InputMask maxlenght="10" className="form-control" mask="99/99/9999"  type="text"/>
  </td>
  <td>
    <InputMask style={{'fontSize': '13px'}} mask="9999/99-99999"   className="form-control" type="text"/>
  </td>
  <td>
    <InputMask maxlenght="10" className="form-control"  type="text"/>
  </td>
  <td >
    <InputMask className="form-control"  type="text"/>
  </td>
  <td>
    <InputMask className="form-control somatorio"  maskChar="0" mask="99:99" type="text"/>
  </td>
</tr>

Bem, eu gostaria de adicionar esse tr a um tbody, sempre que o usuário clicar em um button, mas ao adicionar, ele apaga o conteúdo já existente no tbody.

Update 2: Mudei a forma como é feito, usando state, segue o código

Componente

constructor(props) {
  super(props);
  this.state = {
    rows: []
  };
}

insereRow() {
  this.setState(prevState => ({
    rows: [...prevState.rows, 'row1']
  }))
}

Renderizando no HTML, através do map

{this.state.rows.map((rows) =>
<tr key={rows}>
  <td>
    {rows}
    <InputMask maxlenght="10" className="form-control" mask="99/99/9999"  type="text"/>
  </td>
  <td>
    <InputMask style={{'fontSize': '13px'}} mask="9999/99-99999"   className="form-control" type="text"/>
  </td>
  <td>
    <InputMask maxlenght="10" className="form-control"  type="text"/>
  </td>
  <td >
    <InputMask className="form-control"  type="text"/>
  </td>
  <td>
    <InputMask className="form-control somatorio"  maskchar="0" mask="99:99" type="text"/>
  </td>
</tr>
)}

Botão que deveria adicionar um item no array, para que fosse renderizado outro tr

<button type="button" onClick={this.insereRow} className="btn btn-primary"><i className="glyphicon glyphicon-plus"></i> Atividades
                </button>

Entretanto da esse erro na linha do this.setState = this is undefined

5
  • Nada melhor do que a documentação, mas sua pergunta não esta clara, qual o problema que está enfrentando? Já tentou algo ? Coloque o código para que podermos te ajudar. Veja na documentação como renderizar o HTML.
    – NoobSaibot
    1/03/2018 às 23:06
  • Mas você só quer adicionar este tr ? Tem certeza que não vai querer adicionar outro. Se você só quer adicionar um, então eu já respondi sua pergunta
    – Marcelo
    2/03/2018 às 15:17
  • Eu gostaria de adicionar outros sim @MarceloRafael 2/03/2018 às 17:32
  • Esses TRS, todos eles serão os mesmos ou irão mudar conforme o clique ?
    – Marcelo
    2/03/2018 às 18:19
  • Todos iguais, @MarceloRafael. Vou atualizar a pergunta com meus novos resultados. Fiz de uma forma diferente 2/03/2018 às 19:23

3 Respostas 3

1

Aqui no meu caso eu criei um component App e um chamado Hello, o que eu fiz aqui é:

-Quando o usuário clicar em <h1>Welcome...</h1>, será renderizado com ReactDOM.render o componente Hello

class Hello extends React.Component {
  render()
  {
    return(
      <h1>Hello, I was inserted beibi :D</h1>
    );
  }
}
class App extends React.Component {
  insertHtml() {
    let target = document.querySelector(".target");

    ReactDOM.render(<Hello/>, target);
  }
  render() {
    return(
      <div>
        <h1 onClick={this.insertHtml.bind(this)}>
          Welcome, click over me
        </h1>

        <div className={"target"}></div>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector(".root"));
<div class="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Você poderia usar:

target.innerHTML = renderToString(<Hello/>);

Mas como você vai querer utilizar o "<Hello/>" para poder ser dinâmico, então aqui não é recomendado usar renderToString. renderToString é mais para Sever Side Rendering

5
  • Agradeço a resposta Marcelo, ja resolveu 75% do problema. Entretanto, tenho outro problema, que é o seguinte: Eu quero renderizar um tr, em um tbody através de um click, como você(muito bem) mostrou, mas o mesmo apaga outros trs que ja foram renderizados de outra forma. Como renderizar em uma tag html sem apagar o conteúdo dela? Obrigado desde já 2/03/2018 às 14:04
  • Você poder criar um array de trs e colocar dentro do componente que dá tranquilo. Exemplo: A cada clique, voce criar um novo tr com document.createElement('tr'), coloca o valor nele e adiciona dentro de um array, no final só adicionar este array dentro do componente @ThiagoSouza
    – Marcelo
    2/03/2018 às 14:14
  • Marcelo, esse tr, é uma row com vários inputs e coisas do tipo. Como eu faria isso sendo que não quero criar um simples tr? 2/03/2018 às 14:21
  • Existe várias maneiras, você pode criar um outro componente, ou pode fazer o que te falei que é criando um elemento com document.createElement() e adicionar filhos que também são document.createElement(), usando o createElement vai ficar um pouco dificil, eu preferiria criar um novo componente. Mas não sei exatamente o que você quer fazer. @ThiagoSouza
    – Marcelo
    2/03/2018 às 14:30
  • alterei a resposta para que você pudesse visualizar melhor 2/03/2018 às 14:53
1

Você deve usar state, ele deve conter dados específicos para o componente que podem mudar ao decorrer da utilização do mesmo.

State deve ser um objeto JavaScript simples.

Para melhor entendimento, vamos criar um componente para trabalhar com contatos.

  1. Crie uma propriedade no objeto state

    this.state = {
      contatos: []
    };
    
  2. Crie um método para adicionar um novo objeto no estado contatos e outros métodos para atualizar esses objetos.

    // Método para adicionar novo objeto no estado "contatos"
    newContato = () => {
       let contatos = this.state.contatos;
       contatos.push({ nome: '', fone: '' });
       this.setState({ contatos: contatos });
    }
    
    // Método para atualizar o valor da propriedade "nome"
    // no objeto "N" do estado "contatos"
    // "i": índice, "e": event
    editNome = (i, e) =>  {
       let contatos = this.state.contatos;
       contatos[i].nome = e.target.value;
       this.setState({ contatos: contatos });
    }
    
    // Método para atualizar o valor da propriedade "fone"
    // no objeto "N" do estado "contatos"
    // "i": índice, "e": event
    editFone = (i, e) =>  {
       let contatos = this.state.contatos;
       contatos[i].fone = e.target.value;
       this.setState({ contatos: contatos });
    }
    
  3. Template HTML

    {this.state.contatos.map((c, i) =>
    <div key={i}>
      <p>
        <label>#{i} - Nome</label>
        <input type="text" value={c.nome} onChange={e => this.editNome(i, e)} />
      </p>
      <p>
        <label>#{i} - Fone</label>
        <input type="text" value={c.fone} onChange={e => this.editFone(i, e)} />
      </p>
    </div>
    )}
    <button onClick={this.newContato}>Add Contato</button>
    

Note que, ao adicionar um novo objeto no estado contatos o React automaticamente renderiza esse novo objeto na tela sem a necessidade de chamar o método ReactDOM.render novamente.

Exemplo funcionando:

class Contatos extends React.Component {
  constructor() {
    super();
    this.state = {
      contatos: []
    };
  }

  editNome = (i, e) => {
    let contatos = this.state.contatos;
    contatos[i].nome = e.target.value;
    this.setState({ contatos: contatos });
  }

  editFone = (i, e) => {
    let contatos = this.state.contatos;
    contatos[i].fone = e.target.value;
    this.setState({ contatos: contatos });
  }

  newContato = () => {
    let contatos = this.state.contatos;
    contatos.push({ nome: '', fone: '' });
    this.setState({ contatos: contatos });
  }

  render() {
    return (
      <div>
        <div className="esquerda">
        {this.state.contatos.map((c, i) =>
          <div key={i}>
            <p>
              <label>#{i} - Nome</label>
              <input type="text" value={c.nome} onChange={e => this.editNome(i, e)} />
            </p>
            <p>
              <label>#{i} - Fone</label>
              <input type="text" value={c.fone} onChange={e => this.editFone(i, e)} />
            </p>
          </div>
        )}
          <button onClick={this.newContato}>Add Contato</button>
        </div>
        <pre className="direita">
          <code>{JSON.stringify(this.state, null, 2)}</code>
        </pre>
      </div>
    );
  }
}

ReactDOM.render(<Contatos />, document.getElementById('root'));
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.esquerda,
.direita {
  float: left;
  width: 50vw;
}
.esquerda > div {
  padding: 1em;
  padding-bottom: 0;
}
p, input {
  font-family: Lato;
}
p {
  margin: 0;
  margin-bottom: 10px;
}
label {
  display: block;
}

pre {
  background: #f3f3f3;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Referências

0

A resposta é simples, basta ler a documentação:

constructor(){
     //Você tem de dizer quem é "this"
     this.insereRow = this.insereRow.bind(this);
}

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 .