2

Eu tenho um form onde tem um responsável padrão (NovoResponsavel), mas se houver algum outro tem que ser adicionado um novo responsável a cada clique do botão 'adicionar outro', hoje eu só consigo adicionar uma única vez, gostaria de sabe se alguém saberia adicionar um mesmo component várias vezes.

Novo Responsavel é um component - que tem 4 inputs dentro dele, eu quero apenas repetir o component.

import {NovoResponsavel} from 'components';

class NovoAtendimento extends React.Component {

handleClick() {
  this.setState({
    clicked: true
  });
}
render(){

 return (
    <NovoResponsavel/>

    {this.state.clicked ? <NovoResponsavel /> : null}

    <ItemGrid xs={12} sm={12} md={12}>
       <a onClick={this.handleClick} className="addnew">
         adicionar outro responsável
       </a>   
    </ItemGrid>  

 );
}

inserir a descrição da imagem aqui

1

1 Resposta 1

3

Você deve criar uma lista (salvar no state) e utilizar o map para renderizar esta lista:

class NovoResponsavel extends Component {
  render(){
    const responsavel = this.props.responsavel;

    return (
       <div>
         Responsavel <input type="text" defaultValue={responsavel.Nome} />
        </div>   
    );
   }
}

class NovoAtendimento extends Component {
  constructor(props){
    super(props);
    this.state = {responsaveis: []};
    this.handleAdicionarResponsavel = this.handleAdicionarResponsavel.bind(this);
  }
   handleAdicionarResponsavel() {
    var responsaveis = this.state.responsaveis;
    responsaveis.push({Nome: ''});

    this.setState({
      responsaveis: responsaveis
    });
  }
  render(){
    const responsaveis = this.state.responsaveis.map(r=> <NovoResponsavel responsavel={r}/>);

    return (
      <div>
        {responsaveis}
        <ItemGrid xs={12} sm={12} md={12}>
          <a onClick={this.handleAdicionarResponsavel} className="addnew">
            adicionar outro responsável
          </a>   
          </ItemGrid>  
        </div>
    );
  }
}
1
  • Boa resposta. Aproveite e explique também ao AP porque motivo não funciona como um booleano como ele tem.
    – Isac
    12/03/2018 às 21:29

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 .