Как сделать редактирование текста в ToDoList?

Question

Как в ToDoList'е правильно реализовать кнопку Редактировать (она обведена красным на скриншоте)? Нужно, чтобы при нажатии можно было изменить текст.

Не совсем понимаю на уровне возможностей React'а как это сделать. Поле должно быть input'ом, чтобы его редактировать, и потом это вставить в стейт уже в обновлённом виде? Или как?

Answer 1

я не понимаю каким образом может редактироваться уже написанный элемент

Вот пример того, как можно заменять "написанный" элемент на "редактируемый"...

//
const Edit = ({set, val, ok}) => {
  const aok = e => {
    e.preventDefault()
    ok(false) 
  }
  const aval = e => set(e.target.value)
  return <form onSubmit={aok}>
    <input value={val} onChange={aval} />
    <button>Ok</button>
  </form>
}
//
const View = ({set, val}) => {
  const act = _ => set(true) 
  return <div className='view'>
    <span>{val}</span>
    <button onClick={act}>Редактировать</button>
  </div>
}
//
const App = _ => {
  const [val, setVal] = React.useState('')
  const [ok, setOk] = React.useState(false)
  return <section>
    {ok ? <Edit val={val} set={setVal} ok={setOk} /> : <View val={val} set={setOk} />}
  </section>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

.view,
form {
  display: flex;
  gap: 10px;
  & span,
  & input {
    width: 200px;
  }
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Как сделать редактирование текста в ToDoList?

Ответы (1 шт):