Jason/safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap06 -> Understanding controlled components

Browse Source
This commit is contained in:
Jason Zhu 2022-03-30 22:36:10 +11:00
parent 2f868ead68
commit 17dd32bcac
1 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
QandA/frontend/src/Header.tsx
View File

@ -1,14 +1,23 @@
/** @jsxImportSource @emotion/react */ /** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'; import { css } from '@emotion/react';
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link, useSearchParams } from 'react-router-dom';
import { UserIcon } from './Icons'; import { UserIcon } from './Icons';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles'; import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
export const Header = () => { export const Header = () => {
const [searchParams] = useSearchParams();
const criteria = searchParams.get('criteria') || '';
const [search, setSearch] = React.useState(criteria);
const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.currentTarget.value); setSearch(e.currentTarget.value);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log(search);
}; };
return ( return (
@ -38,26 +47,29 @@ export const Header = () => {
> >
Q & A Q & A
</Link> </Link>
<input <form onSubmit={handleSubmit}>
type="text" <input
placeholder="Search ..." type="text"
onChange={handleSearchInputChange} placeholder="Search ..."
css={css` value={search}
box-sizing: border-box; onChange={handleSearchInputChange}
font-family: ${fontFamily}; css={css`
font-size: ${fontSize}; box-sizing: border-box;
padding: 8px 10px; font-family: ${fontFamily};
border: 1px solid ${gray5}; font-size: ${fontSize};
border-radius: 3px; padding: 8px 10px;
color: ${gray2}; border: 1px solid ${gray5};
background-color: white; border-radius: 3px;
width: 200px; color: ${gray2};
height: 30px; background-color: white;
:focus { width: 200px;
outline-color: ${gray5}; height: 30px;
} :focus {
`} outline-color: ${gray5};
/> }
`}
/>
</form>
<Link <Link
to="signin" to="signin"
css={css` css={css`