How to change parent element attribute from within child

Asked

Viewed 669 times

1

I want to click on mine Icon it changes properties of the first element. Where am I missing? How to do?

import React from 'react';
import './header.css';
import { Col, Container, Row, MediaBox, Icon } from "react-materialize";


class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = { active: true };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(state => ({
            active: !state.active
        }));
    }
    render() {
        return (
            <Col 
                s={12} 
                m={4} 
                l={2} 
                className="pink darken-1 text-white header" 
                thisActive={this.state.active ? 'active' : ''}>
                <Container>
                    <Row>
                        <Col s={6} m={4} l={2} className="header-logo">
                            <MediaBox className="header-logo-img">
                                <img src={require("./img/logo-insta-header.png")} />
                            </MediaBox>
                        </Col>
                        <Col s={6} m={4} l={2} className="header-menu">
                            <Icon medium right className="header-menu-btn text-white" onClick={this.handleClick}>
                                menu
                            </Icon>
                        </Col>
                    </Row>
                </Container>
            </Col>
        );
    }
}

export default Header;

javascript react

  • And that would be the "first element" to div header-menu?? You think a pure JS code could help you or has to be in React even?

  • 1

    The first element would be . header and a pure js code could help yes.

  • OK Rafael I left an answer, I tried to follow to the maximum the structure you have, in fact I think it looked good and it will be easy for you to adapt the JS pro React ;)

2 answers

2

From what I understand you want to change an element of the father inside the son ? If yes we go there !

Element I want to change

<h1>{this.sate.texto}</h1>

In the father you would define the function that would change the state texto: " ", and then send her to her son.

<SeuComponente NomedaFunc={ this.NomeDaFunc.bind(this) } />

And from inside the son you would call her

this.props.NomeDaFunc(Parametro1)

I hope I’ve helped

1

As agreed in the comment I made this model with pure JS and following its HTML structure, including with the Bootstrap that I think you tb is using it.

See that when I click on the menu I add a class "ativo" in the element tb has the class .header, ai does not matter much the structure of tab, because I will select the element by class and not by the order or index of tags.

inserir a descrição da imagem aqui

Code of the image above.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .header.ativo {
        background-color: green;
    }
</style>
</head>
<body>
    
<div class="header">
    <div class="container">
        <div class="row">
            <div class="header-logo col-6">
                <div class="header-logo-img">
                    <img src="https://placecage.com/100/100">
                </div>
            </div>
            <div class="header-menu col-6">
                <i medium right class="header-menu-btn text-danger" onclick="ativa()">
                    menu
                </i>
            </div>
        </div>
    </div>
</div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <script>
    function ativa() {
        var pai = document.querySelector('.header');

        pai.classList.toggle('ativo')
    }
    </script>
</body>
</html>

  • @Fullstack-Overkill your answer is in the comment in the question http://prntscr.com/ofy2ij I asked before answering, and it makes sense [] s

Browser other questions tagged javascript react

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