mirror of
https://github.com/IgnatZakalinsky/home-works.git
synced 2025-12-17 04:49:25 +00:00
fix hw3 - add onBlur
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user