Как редактировать строку reactjs

Question

Хочу реализовать редактирование строк в todo приложении. Не представляю как сделать не используя prompt и собственное поле для ввода текста. Когда нажимаешь на кнопку, мне убрать текст и поставить инпут с текущем значением? или как сделать...

Answer 1

Можно вместо текста показывать input когда пользователь нажимает на кнопку редактировать. Для этого необходимо иметь стейт updatedItem в котором будем хранить ID элемента который редактируется (только 1 в конкретный момент). В компонент элемента списка <ListItem /> передаём функции для обновления списка, обновления updatedItem ну и сам updatedItem. Получается примерно так:

// import React from "react";

const toDoList = [
  { id: 1, title: "Shopping", finished: false },
  { id: 2, title: "Do homework", finished: false },
  { id: 3, title: "Relax", finished: false },
];

const App = () => {
  const [list, setList] = React.useState(toDoList);
  const [updatedItem, setUpdatedItem] = React.useState(null);

  return (
    <div>
      <h3>My todos:</h3>
      <div>
        {list.map((item, idx) => (
          <ListItem
            key={item.id}
            item={item}
            idx={idx}
            setList={setList}
            updatedItem={updatedItem}
            setUpdatedItem={setUpdatedItem}
          />
        ))}
      </div>
    </div>
  );
};

const ListItem = ({
  item: { id, title },
  idx,
  setList,
  updatedItem,
  setUpdatedItem,
}) => {
  const isCurrentBeingUpdated = updatedItem === id;

  const handleInputChange = ({ target: { value } }) => {
    setList((prevList) =>
      prevList.map((item) =>
        item.id === id ? { ...item, title: value } : item
      )
    );
  };

  const renderTitleOrInput = () => {
    return isCurrentBeingUpdated ? (
      <input value={title} onChange={handleInputChange} />
    ) : (
      title
    );
  };

  return (
    <div style={{ border: "1px solid navy", margin: "1rem", padding: "1rem" }}>
      <div>
        {idx + 1}. {renderTitleOrInput()}
      </div>
      <button onClick={() => setUpdatedItem(isCurrentBeingUpdated ? null : id)}>
        {isCurrentBeingUpdated ? "Save" : "Edit"}
      </button>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Как редактировать строку reactjs

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