Сделали колбэк на изменение строки
This commit is contained in:
+14
-13
@@ -2,26 +2,27 @@ import styles from './styles/App.module.scss'
|
|||||||
import React, { useState, useCallback } from 'react'
|
import React, { useState, useCallback } from 'react'
|
||||||
|
|
||||||
function Parent() {
|
function Parent() {
|
||||||
const names = ['Alex','Bob','Deniel'];
|
const [text,setText] = useState('')
|
||||||
const handleNameClick = useCallback( name => {
|
|
||||||
alert(`Вы нажали на ${name}`);
|
const handlerChange = useCallback( event => {
|
||||||
|
setText(event.target.value);
|
||||||
},[]);
|
},[]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>Проверка React.useCallback</h2>
|
<h2>Проверка события onChange</h2>
|
||||||
{names.map(name => (
|
<div>
|
||||||
<Child key={name} name={name} onClick={handleNameClick} />
|
<Child value={text} onChange={handlerChange} />
|
||||||
))}
|
<p>Вы ввели текст: {text}</p>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const Child = React.memo(({ name, onClick }) => {
|
function Child({ value, onChange }) {
|
||||||
console.log('child rendered');
|
console.log('rendred');
|
||||||
const handleClick = useCallback(()=>onClick(name),[name, onClick]);
|
return <input type="text" value={value} onChange={onChange} />
|
||||||
|
}
|
||||||
return <button onClick={handleClick}>{name}</button>
|
|
||||||
})
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user