Aprende a ejecutar una función de componente hijo del padre en react.

Cómo ejecutar una función del componente hijo desde el componente principal en React

Para ejecutar una función desde un componente hijo, necesitará usar Refs. React admite un atributo especial que puede adjuntar a cualquier componente, ese es el refatributo, toma una función de devolución de llamada y puede acceder a las funciones del componente secundario en el acceso principal this.refs.REF_NAME.METHOD_NAME.

Vamos a crear un elemento Padre, renderizará un <Child/>componente. Como puede ver, el componente que se representará, debe agregar el refatributo y proporcionarle un nombre. Luego, la triggerChildAlertfunción, ubicada en la clase principal accederá a la propiedad refs del contexto this (cuando se active la función triggerChildAlert accederá a la referencia secundaria y tendrá todas las funciones del elemento secundario).

class Parent extends React.Component {
    triggerChildAlert(){
        this.refs.child.showAlert();
    }

    render() {
        return (
            <div>
                {/* Note that you need to give a value to the ref parameter, in this case child*/}
                <Child ref="child" />
                <button onClick={this.triggerChildAlert}>Click</button>
            </div>
        );
    }
}

Ahora, el componente hijo, como se diseñó teóricamente anteriormente, se verá así:

class Child extends React.Component {
    showAlert() {
        alert('Hello World');
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

El método showAlertes el único método al que se podrá acceder this.refs.child en el componente principal.

Ejemplo

Si no entendiste bien el ejemplo anterior, puedes analizar la siguiente implementación. En este ejemplo, vamos a utilizar material-ui y 2 de sus componentes, el cajón y un botón. El cajón personalizado se ubicará en un archivo adicional Drawer.js:

// Drawer.js

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';

export default class DrawerMain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {open: false};
    }

    // Shows or hide the Drawer
    handleToggle = () => this.setState({open: !this.state.open});

    // Closes the drawer
    handleClose = () => this.setState({open: false});

    render() {
        return (
            <div>
                <Drawer
                    docked={false}
                    width={200}
                    open={this.state.open}
                    onRequestChange={(open) => this.setState({open})}
                >
                    <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                    <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                </Drawer>
            </div>
        );
    }
}

Nada especial a lo que debamos prestar atención, el método handleToggle solo es accesible en el componente Drawer, sin embargo, como no vamos a agregar ningún botón dentro del componente <Drawer />, necesitamos de alguna manera acceder a esos métodos, de lo contrario no podríamos usar el Drawer. Por lo tanto, en nuestro componente </Main>, vamos a agregar un botón simple que mostrará el cajón y accederá al método handleToggle en el componente <Drawer />:

import React, {Component} from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/image/add-a-photo';
// Import the drawer component previously created as DrawerMain
import DrawerMain from './Drawer';


class Main extends Component {
    constructor(props, context) {
        super(props, context);
    }

 
    handleDrawer = () => {
        // Access the handleToggle function of the drawer reference
        this.refs.customDrawerReference.handleToggle();
    }
 

    render() {
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
                <div>
                    {/* Add the Drawer and create the "drawer" reference */}
                    <DrawerMain ref="customDrawerReference"/>

                    {/* The button that will open the drawer onTouchTap (click or whatever) */}
                    <FloatingActionButton style={style} onTouchTap={this.handleDrawer}>
                        <ContentAdd />
                    </FloatingActionButton>
                </div>
            </MuiThemeProvider>
        );
    }
}

export default Main;

Si desea más información sobre el atributo ref, lea la documentación oficial de React aquí.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores