Сделали колбэк на изменение строки

This commit is contained in:
2026-05-05 21:18:08 +03:00
parent 3d34262203
commit 92dc5df96b
+14 -13
View File
@@ -2,26 +2,27 @@ import styles from './styles/App.module.scss'
import React, { useState, useCallback } from 'react'
function Parent() {
const names = ['Alex','Bob','Deniel'];
const handleNameClick = useCallback( name => {
alert(`Вы нажали на ${name}`);
const [text,setText] = useState('')
const handlerChange = useCallback( event => {
setText(event.target.value);
},[]);
return (
<>
<h2>Проверка React.useCallback</h2>
{names.map(name => (
<Child key={name} name={name} onClick={handleNameClick} />
))}
<h2>Проверка события onChange</h2>
<div>
<Child value={text} onChange={handlerChange} />
<p>Вы ввели текст: {text}</p>
</div>
</>
);
}
const Child = React.memo(({ name, onClick }) => {
console.log('child rendered');
const handleClick = useCallback(()=>onClick(name),[name, onClick]);
return <button onClick={handleClick}>{name}</button>
})
function Child({ value, onChange }) {
console.log('rendred');
return <input type="text" value={value} onChange={onChange} />
}
function App() {
return (