1
resposta

Ajuda para Aplicação React no Freela

Tenho os seguinte Código:

 onSearch(evt) {
        evt.preventDefault();
        var term = this.refs['search-term'].value;
        this.refs['search-term'].value = "";
        if (!string(term).isEmpty())
            this.context.router.push("/search/" + encodeURI(term));

//
    },

 render() {        
        return (
            <nav className="navbar navbar-toggleable-md navbar-light bg-faded fixed-top ilv-navbar">
                <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar_menu" aria-controls="navbar_menu" aria-expanded="false" aria-label="Toggle navigation">
                    <i className="ilv-icon material-icons">&#xE5D2;</i>
                </button>

                <Link to="/home" className="navbar-brand">
                    {<img src={Logo} alt="ilevus" />}
                </Link>

                <div className="collapse navbar-collapse" id="navbar_menu" aria-expanded={this.closeNavBar()}>

                    <form className="form-inline mr-auto mt-2 mt-lg-0 ilv-navbar-search" onSubmit={this.onSearch} id="js-navbar-search">
                        <input ref="search-term" className="form-control ilv-form-control ilv-navbar-search-input" type="search" />
                        <button className="ilv-btn ilv-btn-icon ilv-btn-primary ilv-navbar-search-btn" type="submit">
                            <i className="ilv-icon material-icons md-18">&#xE8B6;</i>{Messages.get("LabelSearch")}
                        </button>
                    </form>

como que eu faço para fechar o nav-bar apos o click do botão de search, o que fecha o nav-bar é a div collapse navbar-collapse ria exoanded='false', teria que mudar essa propriedade colocando o codigo ou uma chamada a uma função de fechamento dessa nav-bar apos o código do function onSearch? sei que não tem a ver com o curso mais pelo menos está dentro do escopo em estudo.

1 resposta

Oi Moacir, lembra do seguinte. Você gerencia o estado do seu componente e o React renderiza os elementos em função do estado no html necessário. Minha sugestão: tenha alguma flag no seu componente que possa ser trocada depois da busca.. isso vai disparar um novo render do seu componente... na div específica tenha um if que adiciona a classe em função do estado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software