如何過濾物件陣列取決于輸入onChange文本（React）

（反應問題）

假設我們有這樣的物件陣列：

    const books = [
      {
        author: "Marcel Proust",
        title: "In Search of Lost Time",
        pageNumber: 123,
      },
      {
        author: "James Joyce",
        title: "Ulysses",
        pageNumber: 123,
      },
      {
        author: "Miguel de Cervantes",
        title: "Quixote",
        pageNumber: 123,
      },
      {
        author: "Herman Melville",
        title: "Moby Dick",
        pageNumber: 123,
      },
      {
        author: "William Shakespeare",
        title: "Hamlet",
        pageNumber: 123,
      },
    ];

我們也有這樣的輸入和狀態：

    const [text, setText] = useState("");

    const handleOnChange = (event) => {
      setText(event.target.value);
    };

    <input value={text} onChange={handleOnChange} />;

現在，我想根據輸入文本過濾這個陣列，并且 [作者 | 標題]屬性。

例子：

如果用戶鍵入“M”，則物件陣列應如下所示：

    const books = [
      {
        author: "Marcel Proust",
        title: "In Search of Lost Time",
        pageNumber: 123,
      },
      {
        author: "Miguel de Cervantes",
        title: "Quixote",
        pageNumber: 123,
      },
      {
        author: "Herman Melville",
        title: "Moby Dick",
        pageNumber: 123,
      },
    ];

...因為作者或標題以字母 M 開頭。

uj5u.com熱心網友回復：

每次輸入文本更改時，您都可以使用Array.prototype.filter過濾掉包含輸入文本的books位置。titleauthor

注意：我使用String.prototype.includes來計算匹配，但您也可以使用其他 String 方法，例如String.prototype.startsWith。

const books = [
  { author: "Marcel Proust", title: "In Search of Lost Time", pageNumber: 123 },
  { author: "James Joyce", title: "Ulysses", pageNumber: 123 },
  { author: "Miguel de Cervantes", title: "Quixote", pageNumber: 123 },
  { author: "Herman Melville", title: "Moby Dick", pageNumber: 123 },
  { author: "William Shakespeare", title: "Hamlet", pageNumber: 123 },
];

const App = () => {
  const [searchText, setSearchText] = React.useState("");

  const filteredBooks = books.filter(
    ({ author, title }) =>
      author.toLowerCase().includes(searchText.toLowerCase()) ||
      title.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={({ target }) => setSearchText(target.value)}
      />
      <ul>
        {filteredBooks.map(({ author, title }) => (
          <li key={title}>
            <strong>{title}</strong> by {author}
          </li>
        ))}
      </ul>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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

uj5u.com熱心網友回復：

試試這個：

const filteredBooks = books.filter(book => {
  return book.title[0] === text || book.author[0] === text;
})

uj5u.com熱心網友回復：

您應該在books陣列上使用過濾器。

const filtered = books.filter(({author, title}) => author.includes(text) || title.includes(text)

這將在作者或標題的任何位置過濾您的文本。因此，在您的示例中，如果您鍵入“S”，您將獲得“William Shakespeare”。如果您只想從頭開始搜索，您可以使用startsWith而不是includes

uj5u.com熱心網友回復：

books.filter(({ author, title }) => author.toLowerCase().includes(text.toLowerCase()) || title.toLowerCase().includes(text.toLowerCase()))

uj5u.com熱心網友回復：

我認為這可行：

books.filter((book) => {
                        if (YOURINPUTVALUE === '') {
                            return book
                        } else if (
                            books.author
                                .toLowerCase()
                                .includes(YOURINPUTVALUE.toLowerCase())
                        ) {
                            return book
                        }
                    })

uj5u.com熱心網友回復：

請試試這個

const books = [
      {
        author: "Marcel Proust",
        title: "In Search of Lost Time",
        pageNumber: 123,
      },
      {
        author: "James Joyce",
        title: "Ulysses",
        pageNumber: 123,
      },
      {
        author: "Miguel de Cervantes",
        title: "Quixote",
        pageNumber: 123,
      },
      {
        author: "Herman Melville",
        title: "Moby Dick",
        pageNumber: 123,
      },
      {
        author: "William Shakespeare",
        title: "Hamlet",
        pageNumber: 123,
      },
    ];

const filterWithAuthorAndTitle = (books, searchParams) => {
  return books.filter(({ author, title }) => {
          const testString = `${author}${title}`.toLowerCase();
        let authorName = author.toLowerCase();
    let bookTitle = title.toLowerCase();
          return testString.includes('m') && (authorName.startsWith('m') || bookTitle.startsWith('m'));
        })
}

let filteredBooks = filterWithAuthorAndTitle(books, 'm');

console.log(filteredBooks);

標籤：javascript 反应

上一篇：每當輸入內容時，ReactJSApp都會凍結瀏覽器

下一篇：反應組件不重繪