Question

我只是从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>

我有一种预感，我应该为称为主题的卡创建一个状态，并具有某种过滤功能，但是我不确定如何实现。

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

Answer 1

我已经实施了一些与问题有关的东西。尝试这个，我创建了一个数字数组，选择onChange时，我已经过滤了您提到的卡片。使用了相同的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;

如何使用onClick（）

1 个答案: