fix hw3 - add onBlur

This commit is contained in:
IgnatOffice
2022-06-08 18:23:11 +03:00
parent f5c5bd271c
commit d6467e14fd
2 changed files with 11 additions and 6 deletions

View File

@@ -5,6 +5,7 @@ type GreetingPropsType = {
name: string // need to fix any name: string // need to fix any
setNameCallback: (e: ChangeEvent<HTMLInputElement>) => void // need to fix any setNameCallback: (e: ChangeEvent<HTMLInputElement>) => void // need to fix any
addUser: () => void // need to fix any addUser: () => void // need to fix any
onBlur: () => void // need to fix any
onEnter: (e: KeyboardEvent<HTMLInputElement>) => void onEnter: (e: KeyboardEvent<HTMLInputElement>) => void
error: string // need to fix any error: string // need to fix any
totalUsers: number // need to fix any totalUsers: number // need to fix any
@@ -13,7 +14,7 @@ type GreetingPropsType = {
// презентационная компонента (для верстальщика) // презентационная компонента (для верстальщика)
const Greeting: React.FC<GreetingPropsType> = ( const Greeting: React.FC<GreetingPropsType> = (
{name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser} // деструктуризация пропсов {name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser, onBlur} // деструктуризация пропсов
) => { ) => {
const inputClass = error ? s.errorInput : s.input // need to fix with (?:) const inputClass = error ? s.errorInput : s.input // need to fix with (?:)
@@ -26,7 +27,7 @@ const Greeting: React.FC<GreetingPropsType> = (
onChange={setNameCallback} onChange={setNameCallback}
className={inputClass} className={inputClass}
onKeyDown={onEnter} onKeyDown={onEnter}
onBlur={setNameCallback} onBlur={onBlur}
/> />
<div id={'hw3-error'} className={s.error}>{error}</div> <div id={'hw3-error'} className={s.error}>{error}</div>
</div> </div>

View File

@@ -20,14 +20,17 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
error && setError('') error && setError('')
} }
const addUser = () => { const addUser = () => {
addUserCallback(name)
setName('')
}
const onBlur = () => {
const trimmedName = name.trim() const trimmedName = name.trim()
if (trimmedName) { if (!trimmedName) {
addUserCallback(trimmedName) // need to fix
} else {
setError('name is require!') setError('name is require!')
} }
setName('') setName(trimmedName) // need to fix
} }
const onEnter = (e: KeyboardEvent<HTMLInputElement>) => { const onEnter = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -44,6 +47,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
return ( return (
<Greeting <Greeting
onBlur={onBlur}
name={name} name={name}
setNameCallback={setNameCallback} setNameCallback={setNameCallback}
addUser={addUser} addUser={addUser}