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 CustomerAddress
está 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
?
CustomerAddress
no componente pai dele, é isso?