Child component, return to parent component REACT

Question

Child component, return to parent component REACT

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I have the following modal:

<Modal dialogClassName="clientes-modal" show={this.state.show} className="modal fade">
    <Modal.Header className="bg-new">
        <h4 ><i className="fa fa-plus"/> Novo Cliente</h4>
        <h4 className="x-button" onClick={() => {this.fechar()}}>
          <i className="fa fa-times"/>
        </h4>
     </Modal.Header>
     <Modal.Body className="center margin-bottom-15">
         <Cadastro/>
     </Modal.Body>
</Modal>

What I need is for the <Cadastro/> component to close this mode when executing a PHP function, how can I do this?

<Cadastro/>

render(){
    return(
        <div className="content novo">
            <Alerta ref={(ref)=>this.alerta = ref} />
            <Form id='testeForm' 
                 action={_P_URL_ + 'cliente/gravar_cadastro'} 
                 erro={erro => this.erro(erro)}>
                <h3 className="nova_titulo">Novo</h3>
                <hr/>

                <Row>
                    <Input label="*Nome" nome="nome" md="3" />
                    <InputCpf label="*CPF" id="cpf" nome="cpf" md="3" />
                    <InputData label="Data de nascimento" nome="nascimento" md="3" />
                    <Input label="RG" nome="rg" md="3" />
               </Row>

               <Row>
                   <InputPhone label="*Telefone" nome="telefone" md="6"/>
                   <Input label="E-mail" nome="email" md="6" />
               </Row>

               <h4 className="titulo">Endereço</h4>
               <hr/>
               <Endereco />
               <ButtonSubmitForm><i className="fa fa-check"/> Gravar</ButtonSubmitForm>
           </Form>
        </div>
)}

javascript react

asked by anonymous 24.05.2018 / 15:09

2 answers

3

You can pass a arrow function as a parameter in this "Registration" component to change the "show" state variable. For example:

<Cadastro onClose={() => this.setState({show: false})}/>

When this function in the "Register" that has to close the "Modal", you can use this parameter "onClose" in the following way:

this.props.onClose && this.props.onClose();

Doing this way there, first you will see if there is something in this parameter "onClose" and then call the function that is in that parameter.

24.05.2018 / 15:20

How to center button text vertically [duplicate] Sum of each element of two lists

score 3 · Accepted Answer

You pass the fechar function from the modal to within <Cadastro> . Something like

<Cadastro onSubmit={() => this.fechar()} />

From the registry you invoke this function where you need, taking the props

... this.props.onSubmit() ...