如何使用 onClick() 过滤 React Bootstrap Card答案

【问题标题】：How to Filter React Bootstrap Cards using onClick()如何使用 onClick() 过滤 React Bootstrap Card
【发布时间】：2019-09-25 12:45:34
【问题描述】：

我刚开始使用 React，我正在尝试构建一个显示卡片的基本网站。按下按钮时，我只希望显示具有匹配主题/描述的卡片。我正在使用 React Bootstrap 的 Card-Columns。

以下是每张卡片的外观示例：

<Card>
  <Card.Img variant="top" src="./image" />
  <Card.Body>
    <Card.Title>Title</Card.Title>
    <Card.Text>
      Text here.
    </Card.Text>
  </Card.Body>
</Card>

我有一种预感，我应该为名为 subject 的卡片创建一个状态并具有某种过滤功能，但我有点不确定如何实现它。

我希望有人可以链接一些资源或提供一些提示！谢谢！

【问题讨论】：

发布您的状态和完整的 HTML 结构。

标签： javascript reactjs react-bootstrap

【解决方案1】：

我已经实现了一些与问题相关的东西。尝试这个，我已经创建了一个数字数组，onChange on select 我已经过滤了你提到的卡片。使用相同的react-bootstrap 库

我在这里过滤带有匹配标题的卡片。

import React, { useState } from "react";

import Container from "react-bootstrap/Container";
import { Card } from "react-bootstrap";


const titles = [1, 2, 3, 3, 2, 4, 5, 3, 5, 3, 7, 4, 3, 6, 6, 4, 5];


const App = () => {
  const [selected, updateSelect] = useState(1)

  const onChange = (e) => updateSelect(Number(e.target.value))
  return (
    <Container className="p-3">
        <h1 className="header">Welcome To React-Bootstrap</h1>
        <select onChange={onChange}>
          {[1,2,3,4,5,6].map(num => <option value={num}>{num}</option>)}
        </select>
        {titles.filter(n => n===selected).map(num => (
          <Card>
          {/* <Card.Img variant="top" src="./image" /> */}
            <Card.Body>
              <Card.Title>{num}</Card.Title>
              <Card.Text>
                Text here.
              </Card.Text>
            </Card.Body>
          </Card>
        )

        )}

    </Container>
  );
};

export default App;

【讨论】：