我想要一个搜索按钮svg，当我单击该按钮时，搜索输入应打开。如果有人再次单击该按钮，则输入为空白时，它将关闭，如果已填写，则应提交表单
此外，当搜索输入打开时，登录按钮应隐藏
错误消息：由于未连接表单，表单提交已取消
请全屏查看
class Login extends React.Component {
render() {
return (
<button classname="btn btn-outline-dark my-2 my-sm-0" style={{marginRight: "5px"}}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.35 6.35" height="28" width="28" style={{marginRight: "5px"}}><path d="M4.043 1.487c.79.286 1.348.996 1.348 1.826 0 1.083-.95 1.96-2.124 1.96s-2.124-.878-2.124-1.96c0-.8.517-1.486 1.26-1.792" fill="none" stroke="#000" stroke-width=".2" stroke-linecap="round" paint-order="markers stroke fill"/><path d="M3.202 1.042h.207v2.114h-.207z" paint-order="markers stroke fill"/></svg>
Login
</button>
);
}
}
class Searchbar extends React.Component {
constructor() {
super();
this.state = {displayInput: false};
this.toggleDisplayInput = this.toggleDisplayInput.bind(this);
}
toggleDisplayInput(){
this.setState({displayInput: !this.state.displayInput});
}
render(){
return (
<div>
{
this.state.displayInput ? (
<div>
<form classname="form-inline my-2 my-lg-0">
<input classname="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" style={{cursor: "pointer"}} />
<button classname="btn btn-outline-light my-2 my-sm-0" type="submit" onClick={this.toggleDisplayInput}>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" style={{fill: "dodgerblue"}}><path d="M15.5 14h-.8l-.28-.27A6.47 6.47 0 0 0 16 9.5a6.5 6.5 0 1 0-13 0A6.5 6.5 0 0 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>
</button>
</form>
</div>
):(
<div style={{display: "flex"}}>
<Login />
<form classname="form-inline my-2 my-lg-0">
<div classname="btn btn-outline-light my-2 my-sm-0" onClick={this.toggleDisplayInput}>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.28-.27A6.47 6.47 0 0 0 16 9.5a6.5 6.5 0 1 0-13 0A6.5 6.5 0 0 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>
</div>
</form>
</div>
)
}
</div>
)
}
}
class Navbar extends React.Component {
render(){
return(
<nav classname="navbar navbar-expand-lg navbar-light bg-light">
<a classname="navbar-brand" href="#">Navbar</a>
<button classname="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span classname="navbar-toggler-icon"></span>
</button>
<div classname="collapse navbar-collapse" id="navbarSupportedContent">
<ul classname="navbar-nav mr-auto">
<li classname="nav-item active">
<a classname="nav-link" href="#">Home <span classname="sr-only">(current)</span></a>
</li>
<li classname="nav-item">
<a classname="nav-link" href="#">Link</a>
</li>
<li classname="nav-item dropdown">
<a classname="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div classname="dropdown-menu" aria-labelledby="navbarDropdown">
<a classname="dropdown-item" href="#">action</a>
<a classname="dropdown-item" href="#">Another action</a>
<div classname="dropdown-divider"></div>
<a classname="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li classname="nav-item">
<a classname="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<Searchbar />
</div>
</nav>
);
}
}
ReactDOM.render(
<Navbar />,document.getElementById('content')
);<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="content"></div>
</body>
</html>