3

estou no meu primeiro projeto com react, e estou totalmente perdido com um submit.
Meu form deve submeter os dados de cliente, e, dentro desse mesmo form eu posso ter dois endereços. Como ambos os endereços tem os mesmos atributos, resolvi criar um componente de endereço a qual chamei de CustomerAddress.
Segue o código:

export default class Create extends Component {
  constructor() {
    super();

    this.state = {
    documentType: 1,
    name: '',
    fullName: '',
    documentNumber: '',
    telephoneNumber: '',
    mobilePhoneNumber: '',
    email: '',
    dueDate: 1,
  };

  //Código ignorado
}

render() {
return (
  <div>
    <h1>Novo Cliente</h1>

    <hr />

    <form className="form-group">
      <div className="row">
        <BsInput col="col-lg-3 col-md-3 col-sm-6" htmlFor="customerName" label="Nome Fantasia" id="customerName" name="customerName" value={this.name} onChange={this.saveChanges.bind(this, 'name')} />

        <BsInput col="col-lg-3 col-md-3 col-sm-6" htmlFor="customerFllName" label="Razão Social" id="customerFllName" name="customerFullName" value={this.fullName} onChange={this.saveChanges.bind(this, 'fullName')}/>

        <BsSelect col="col-lg-2 col-md-2 col-sm-6" htmlFor="documentType" label="Documento" id="documentType" name="documentType" listItems={this.state.documentTypes} onChange={this.setDocumentType} value={this.documentType} />

      </div>

      <div className="row row-top-30">
        <BsInputMask mask="(99) 9999-9999" maskChar=" " col="col-lg-3 col-md-3 col-sm-6" htmlFor="comercialPhone" label="Tel. Comercial" id="comercialPhone" name="comercialPhone" value={this.telephoneNumber} onChange={this.saveChanges.bind(this, 'telephoneNumber')}/>

        <BsInputMask mask="(99) 99999-9999" maskChar=" " col="col-lg-3 col-md-3 col-sm-6" htmlFor="mobilePhone" label="Tel. Celular" id="mobilePhone" name="mobilePhone" value={this.mobilePhoneNumber} onChange={this.saveChanges.bind(this, 'mobilePhoneNumber')}/>

        <BsInput col="col-lg-3 col-md-3 col-sm-6" type="email" htmlFor="email" label="E-mail" id="email" name="email" value={this.email} onChange={this.saveChanges.bind(this, 'email')}/>

        <BsInput col="col-lg-2 col-md-2 col-sm-6" type="number" min="1" max="31" htmlFor="dueDate" label="Vencimento da Fatura" id="dueDate" name="dueDate" value={this.dueDate} onChange={this.saveChanges.bind(this, 'dueDate')}/>
      </div>

      <h3 className="row-top-30">Endereço</h3>

      <CustomerAddress />

      <h3 className="row-top-30">Endereço de Cobrança</h3>

      <CustomerAddress />
    </form>
  </div>
);
}


Meu componente CustomerAddressestá assim:

export default class CustomerAddress extends Component {
  constructor() {
    super();
    this.state = {
       zipCode: '',
       address: '',
       number: '',
       complement: '',
       location: '',
       city: '',
       state: '',
       country: ''
    };
  }
//Código ignorado

render() {
return (
  <div>
    <div className="row row-top-30">
      <div className="form-group" className="col-lg-2 col-md-2 col-sm-6">
        <label htmlFor="zipCode">CEP</label>
        <InputMask mask="99999-999" className="form-control" id="zipCode" onKeyPress={this.buscaCep} onChange={this.setChange.bind(this, 'zipCode')} name="zipCode" />
        <span className="error">{this.state.msgErro}</span>
      </div>

      <BsInput col="col-lg-4 col-md-4 col-sm-6" htmlFor="address" value={this.state.address} label="Logradouro" id="address" name="address" onChange={this.setChange.bind(this, 'address')} />

      <BsInput col="col-lg-2 col-md-2 col-sm-6" htmlFor="number" label="Número" id="number" name="number" onChange={this.setChange.bind(this, 'number')} value={this.state.number} />

      <BsInput col="col-lg-3 col-md-3 col-sm-6" htmlFor="complement" label="Complemento" id="complement" name="complement" value={this.state.complement} onChange={this.setChange.bind(this, 'complement')}/>
    </div>

    <div className="row row-top-30">
      <BsInput col="col-lg-4 col-md-4 col-sm-6" htmlFor="location" label="Bairro" id="location" name="location" value={this.state.location} onChange={this.setChange.bind(this, 'location')}/>

      <BsAutoComplete col="col-lg-4 col-md-4 col-sm-6" htmlFor="city" label="Cidade" id="city" name="city" value={this.state.city} placeholder="Selecione uma cidade" items={this.state.cities} onChange={this.setChange.bind(this, 'city')}/>
      <BsAutoComplete col="col-lg-3 col-md-3 col-sm-6" htmlFor="state" label="Estado" id="state" name="state" value={this.state.state} placeholder="Selecione um estado" items={this.state.states} onChange={this.setChange.bind(this, 'state')}/>
    </div>
  </div>
);
}
}

A minha dúvida é: sei que num método de submit posso acessar os dados de cliente usando o próprio state, de modo que caso eu queria acessar o nome posso fazer simplesmente this.state.name, mas como faço para pegar os inputs que estão dentro do componente CustomerAddress?

4
  • Você quer acessar os dados do estado do componente CustomerAddress no componente pai dele, é isso? Commented 8/11/2018 às 11:33
  • Isso mesmo @CaioFelipePereira Commented 8/11/2018 às 11:35
  • 1
    Eu dei uma resposta que fala exatamente sobre isso. Veja se ela te ajuda... caso contrário, dou mais detalhes aqui. Commented 8/11/2018 às 11:46
  • @CaioFelipePereira Ajudou bastante, na verdade a sua resposta junta a outras pesquisas que fiz que apontaram uma solução. Obrigado. Commented 8/11/2018 às 11:48

1 Resposta 1

2

Apenas para formalizar a resposta e ajudar outras pessoas que possam vir ate aqui: Existe uma solução simples, dentre algumas outras, para se obter o valor de um componente filho dentro de um componente pai, que é fornecer um método via props do componente pai para o filho, fazendo com que ele altere um estado do componente pai. Veja

class ComponentePai extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 0
    }

    this.getChildValue = this.getChildValue.bind(this);
  }

  getChildValue(value) {
    this.setState({
      value
    });
  }

  render() {
    return (
      <div>
        <ComponenteFilho parentCallback={this.getChildValue} />
        <p>{this.state.value}</p>
      </div>
    )
  }
}

O componente pai renderiza <ComponenteFilho /> fornecendo emparentCallback (que pode ser o nome que você escolher) um método que está vinculado com o estado deste próprio componente pai. No filho, basta você executá-lo como qualquer outro.

class ComponenteFilho extends Component {
  constructor(props) {
    super(props);

    this.state = {
      valueToParent:10
    }
  }

  render () {
    return(
      <button onClick={this.props.parentCallback(this.state.valueToParent)}>Try me!</button>
    )
  }
}

Comforme o valor do estado do componente filho for alterado, ao se clicar no botão e executar o método, o valor do estado no componente pai também será alterado e renderizado de acordo com a regra que, neste caso, é simplesmente printar o valor em uma tag <p>

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 .