我正在将我当前的应用程序转换为 React,当前应用程序正在使用 jquery 和 PHP。
当前搜索栏
<ul class="token-input">
<li class="token-">
<input name="p" type="password" autocomplete="new-password" value="" data-open="false" class="form-control" placeholder="password protected.">
</li>
</ul>
反应标头
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import A from './A';
import Img from './Img';
import NavBar from './NavBar';
import HeaderLink from './HeaderLink';
import messages from './messages';
import SearchBar from '../SearchBar';
import UserNavbar from '../UserNavbar';
import logoImage from './logo.png';
import backgroundImage from './bg.png';
import './Header.css';
const HeaderImage = styled.div`
background-image: url(${backgroundImage});
`;
/* eslint-disable react/prefer-stateless-function */
class Header extends React.Component {
render() {
return (
<header>
<HeaderImage className="navbar navbar-primary bg-dark shadow-sm">
<div className="container d-flex justify-content-between">
<A
to="/"
className="navbar-brand d-flex align-items-center"
>
<Img src={logoImage} />
<span className="slogan d-none d-md-block"> </span>
</A>
<SearchBar className="search-bar" />
<UserNavbar />
</div>
</HeaderImage>
<div className="tab-area">
<A href="" />
<NavBar>
<HeaderLink to="/">
<FormattedMessage {...messages.recent} />
</HeaderLink>
</NavBar>
</div>
</header>
);
}
}
export default Header;
谁能告诉我如何将此搜索字段作为标题中的 1 个组件集成?(并且搜索正在从网站正文中的过滤器内容中获取数据)