Child component, return to parent REACT component

Asked

Viewed 3,284 times

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 that component <Cadastro/> close this modal when executing a function PHP, 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>
)}

2 answers

3


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

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

From there in the register you invoke this function where you need, picking up the props

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

3

You can pass a Arrow Function as a parameter in this "Register" component to change the state variable "show". For example:

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

Then when this function in the "Register" that has to close the "Modal", you can use this parameter "onClose" in it of the mode sequinte:

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

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.