输入框采用完整的scr onclick或onchange

Question

嘿，我正在构建一个React应用，并且我有一个看起来像这样的导航栏

import React, { Component} from 'react';
import NavImage from "../images/kickstarter.png";
import './navbar.css';

class Navbar extends Component {

    render () {
        return (
            <nav className="navbar navbar-expand-lg navbar-light">
             <div className="container">
                <ul className="navbar-nav mr-auto">
                    <img src={NavImage} width="170" height="60" className="" alt="Kickstarter"/>
                </ul>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                    </ul>
                    <form className="form-inline my-2 my-lg-0">
                        <input className="form-control mr-sm-2 cus-nav-input" type="search" placeholder="Search Project" aria-label="Search" /> 
                    </form>
                </div>
                </div>
          </nav>
        )
    }
}


export default Navbar;

这看起来像这样

现在，当用户单击搜索栏时，我希望它占据完整的导航栏，这类似于产品搜索所做的事情

问题：知道如何实现吗？

Answer 1

您可以使用onclick函数将搜索栏的z级别设置为1，并将宽度设置为等于或小于主导航栏。

看起来像这样

在导航栏输入中添加：

onclick=“expandSearchBar()”

然后在某处添加函数：

function expandSearchBar() {
    //get the id of the search bar and set css to what you need
}