Aprende cómo cambiar el estado de un component padre desde un componente hijo fácilmente en React.

Cómo actualizar el estado del componente principal desde un componente hijo en React

Es posible que desee modificar algunas propiedades en el estado del componente principal de un componente secundario. Aunque no hay una forma directa de agregar referencias, como lo hace cuando desea lograr la comunicación entre padres e hijos , aún puede lograrla indirectamente. Para lograr la comunicación padre-hijo, puede enviar una función como Prop al componente hijo. Esta función debería hacer lo que sea necesario en el componente, por ejemplo, cambiar el estado de alguna propiedad.

Considere el siguiente componente principal:

class Parent extends React.Component {
    constructor(props) {
        super(props)

        // Vincular este contexto a la función del controlador
        this.handler = this.handler.bind(this);

        // Establecer un estado
        this.state = {
            messageShown: false
        };
    }

    // Este método se enviará al componente secundario
    handler() {
        this.setState({
            messageShown: true
        });
    }

    // Renderice el componente secundario y establezca la propiedad de acción con el controlador como valor
    render() {
        return <Child action={this.handler} />
    }
}

El estado de este componente padre tiene la messageShownpropiedad que queremos cambiar por alguna razón desde el componente hijo. En el padre renderizaremos el componente Child y enviaremos como propiedad (en este caso action) la función handler declarada en el padre.

El componente secundario en este caso es muy simple, dibujará un botón cuya acción Prop (enviada en el componente principal) se activará cuando se haga clic en el botón:

class Child extends React.Component {
    render() {
        return (
            <div>
                {/* El botón ejecutará la función de controlador establecida por el componente principal */}
                <Button onClick={this.props.action} />
            </div>
        )
    }
}

De esta manera, puede ejecutar funciones principales desde su componente secundario fácilmente.

Que te diviertas ❤️!


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