Представим, что существует div контейнер, в котором может содержаться пользовательский текст, загружающийся из стейта.
import React, { useState } from 'react';
function App() {
const [text, setText] = useState('Тише, мыши, кот на крыше');
return <div>
{text}
</div>;
}
export default App;
Попробуем сделать так, чтобы при клике на этот текст он заменялся полем для ввода текста (input). Причём содержимое поля должно содержать текущий текст. Для этого сделаем дополнительный стейт, в котором сохраним факт внесения изменений. И по его значению будем показывать либо div контейнер, либо поле для ввода:
import React, { useState } from 'react';
function App() {
const [text, setText] = useState('Тише, мыши, кот на крыше');
const [isEdit, setIsEdit] = useState(false);
let return;
if (isEdit) {
return = <input value={text} />;
} else {
return = <div onClick={() => setIsEdit(true)}>{text}</div>;
}
return <div>
{return}
</div>;
}
export default App;
Если загрузить страницу с таким кодом, то будет показан текст "Тише, мыши, кот на крыше". При клике на него текст заменится полем ввода input, в котором будет этот текст. Но в коде не предусмотрена возможность изменения этого текста и сохранение изменений в стейт, поэтому доработаем пример.Сделаем сохранение текста input поля в стейт по этому событию onChange. И добавим фиксацию окончания редактирования поля с помощью события onBlur. Это событие вызывается, когда элемент теряет фокус:
import React, { useState } from 'react';
function App() {
const [text, setText] = useState('Тише, мыши, кот на крыше');
const [isEdit, setIsEdit] = useState(false);
let return;
if (isEdit) {
return = <input
value={text}
onChange={() => setText(event.target.value)}
onBlur={() => setIsEdit(false)}
/>;
} else {
return = <div onClick={() => setIsEdit(true)}>{text}</div>;
}
return <div>
{return}
</div>;
}
export default App;