Сделали колбэк на изменение строки
This commit is contained in:
+14
-13
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user