Form with list in react

Question

Form with list in react

Navigation

#1 by (2 votes)

3

I'm on my first project with react, and I'm totally lost with a submit. Home My form must submit the client data, and within that same form I can have two addresses. Since both addresses have the same attributes, I decided to create an address component which I called CustomerAddress .
Follow the code:

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>
);
}

My component CustomerAddress looks like this:

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>
);
}
}

My question is: I know that in a submit method I can access client data using state itself, so that if I wanted to access the name I can simply this.state.name , but how do I get the inputs which are within the CustomerAddress ? component

react

asked by anonymous 08.11.2018 / 12:23

1 answer

How to generate TimeFormatter in YYYY-mm-DDThh format: mm: ss-TZ What should I use to make one grid system within another?

score 2 · Accepted Answer

Just to formalize the answer and help others who can come here: There is a simple solution, among others, to obtain the value of a child component within a parent component, which is to provide a method via props of the parent component to the child, causing it to change a state of the parent component. See

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>
    )
  }
}

The parent component renders <ComponenteFilho /> by supplying parentCallback (which may be the name you choose) with a method that is bound to the state of this parent component itself. In child, you just run it like any other.

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>
    )
  }
}

As the child component's state value changes, clicking the button and executing the method causes the state value in the parent component to also be changed and rendered according to the rule, which in this case is simply printar value in a tag <p>