새로 생성 된 목록에 즐겨 찾기 항목을 추가하는 방법

debugcn 에 게시 Dev

아론 어드 윈

즐겨 찾기 항목 (이 경우 Elements A ~ C)을 하나의 특정 새로 생성 된 목록 (사용자가 생성 할 수 있음)에만 표시하는 방법을 알고 싶습니다.

지금은 요소를 좋아할 때 새로 만든 모든 목록에서 해당 요소를 볼 수 있습니다. 다음은 예입니다 (스타일이 누락되어 죄송 합니다만 <br />).

목록 ID (목록 또는 즐겨 찾기를 삭제하는 방법과 비슷 함)로 수행 할 수 있다고 가정하지만 더 잘 이해해야합니다. 또한 Chrome 내부에 하위 요소에 키 값이 없다는 경고가 표시되었습니다. 나는 추가하려고 shortId에 내부 .MAP을 <li>(같은 <li key={shortid.generate()}>,하지만 내 솔루션은 최적의 하나가 아닌 것을 두려워 그것은 (어디서?) 다른 곳에 배치해야합니다).

내 CodeSandbox LINK입니다.

어떤 도움이라도 환영합니다.

사이러스 자이

여기에서 뭔가를 해킹했습니다. 타이프 스크립트를 추가하고 코드를 줄이는 등 몇 가지 개선 할 수 있지만 코딩 기술 수준을 모르기 때문에 따라갈 수 있도록 만들었습니다.

여기에 codeSandbox 링크가 있습니다.

import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [items, setItems] = useState([]);

  const addItem = () => {
    const newItem = {
      id: new Date().getTime(),
      fav: false,
      title: inputValue
    };
    setItems((oldState) => [...oldState, newItem]);
    setInputValue("");
  };

  const makeFav = (id) => {
    console.log("id prop", id);

    const allItems = [...items];
    const itemIndex = allItems.findIndex((item) => item.id === id);
    allItems[itemIndex].fav = !allItems[itemIndex].fav;
    setItems(allItems);
    console.log("itemIndex", itemIndex);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Add item"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => addItem()}>Add</button>
      <hr />
      <h2>Favorites</h2>
      {items
        .filter((item) => item.fav === true)
        .map((item) => {
          return (
            <div key={item.id}>
              {item.title}
              <button onClick={() => makeFav(item.id)}>un fav</button>
            </div>
          );
        })}
      <hr />
      <h2>list</h2>
      {items
        .filter((item) => item.fav === false)
        .map((item) => {
          return (
            <div key={item.id}>
              {item.title}
              <button onClick={() => makeFav(item.id)}>fav</button>
            </div>
          );
        })}
    </div>
  );
};
export default App;

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

새로 생성 된 목록에 즐겨 찾기 항목을 추가하는 방법

새로 생성 된 목록에 즐겨 찾기 항목을 추가하는 방법

(장고 / HTML) 즐겨 찾기 기능에 추가 생성 방법

즐겨 찾기 페이지에 표시 할 항목을 추가하는 방법은 무엇입니까?

장고에서 즐겨 찾기 목록을 표시하는 방법

MongoDB와 Mongoose로 즐겨 찾기 목록을 구성하고 계십니까?

"즐겨 찾기에 추가"를 만들고 Swift 4에서 즐겨 찾기 목록에 표시하는 방법은 무엇입니까?

즐겨 찾기 목록을 쿼리하는 가장 좋은 방법

항목을 "즐겨 찾기"로 저장하고 다른 recyclerview에 표시

iOS 앱에서 '즐겨 찾기'버튼을 추가하는 방법

데이터 그리드에서 즐겨 찾기 선택을 자동으로 새로 고치는 방법

Microsoft Edge에서 즐겨 찾기를 구성하는 방법

동적으로 생성 된 목록 항목에 팝 오버를 추가하는 방법

Android에서 즐겨 찾기 목록을 만드는 가장 좋은 방법은 무엇입니까?

C # 문자열 재생 목록을 즐겨 찾기로 복사 수정

페이지를 먼저로드하지 않고 즐겨 찾기를 즐겨 찾기에 추가하는 방법은 무엇입니까? (Internet Explorer, Firefox)

모든 즐겨 찾기 항목을 표시하는 방법은 무엇입니까?

런처로 넣을 항목 : 런처 즐겨 찾기의 ClassName

vue.js 2에서 즐겨 찾기-즐겨 찾기 버튼을 추가하는 방법은 무엇입니까?

C #에서 원래 목록을 수정하지 않고 항목이 추가 된 새 목록을 만드는 기본 방법이 있습니까?

즐겨 찾기에 항목 추가 및 저장

Extjs 탭 패널에서 동적으로 생성 된 탭에 xtype을 항목으로 추가하는 방법

즐겨 찾는 항목이있는 ListView

Flutter에서 즐겨 찾기 아이콘을 활성화 및 비활성화하는 방법

ClearCase에서 새로 생성 된 파일을 찾는 방법

Twitter API를 사용하여 트윗을 즐겨 찾기에 추가하는 방법

Ubuntu Dock에 즐겨 찾기로 추가 된 .desktop 파일을 수동으로 편집

Ubuntu Dock에 즐겨 찾기로 추가 된 .desktop 파일을 수동으로 편집

로컬 저장소를 사용하여 즐겨 찾기 목록 만들기

동적으로 생성 된 항목을 제거하는 방법

Ruby on Rails에서 프런트 엔드에 즐겨 찾기 버튼을 추가하는 적절한 방법