如何在单击按钮时创建卡片？

Question

我学习 React JS 已经有几天了。它非常有趣并且简化了 JavaScript，至少我是这样认为的。我目前的目标是创建一个按钮，单击该按钮将创建一张新卡片，卡片中会生成一个随机数。

我不知道如何添加 onClick= 功能以使其按照我设想的方式工作。目前我的 index.js 文件中写有按钮的代码。 index.js 是我的主文件，它是我的 App 组件所在的位置。我看到人们使用一个名为 App.js 的文件，不知道为什么，但这是以后的另一个问题。

目前我的按钮采用以下方式设计。

const App = () => {
  return (
    <body>
      <header>
        <div className="ui buttons">
          <button className="ui button mb-1 mt-1">
            <i className="plus icon"></i>
            Add Card
          </button>
          <div className="or mb-1 mt-1"></div>
          <button className="ui positive button mb-1 mt-1">
            <i className="sort numeric down icon"></i>
            Sort All
          </button>
        </div>
      </header>

它们位于我页面顶部的 header 容器中。看起来像下图。

我希望能够单击“添加卡片”按钮，然后让它在我的卡片容器中创建一张新卡片。如下图

您在上图中看到的当前卡片目前是硬编码的。我创建了一个 MainCard.js 组件，其中包含卡片代码，包括随机生成数字的功能和样式。

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import { Card, Button } from "react-bootstrap";

let getRandomNumber = function (min, max) {
  let getRandom = Math.floor(Math.random() * max + min);
  return getRandom;
};

const MainCard = () => {
  return (
    <Card>
      <Button
        className="ui mini red basic icon button"
        style={{
          position: "absolute",
          top: "0",
          right: "0",
        }}
      >
        <i
          className="red x icon"
          style={{
            position: "relative",
            top: "0",
            right: "0",
          }}
        ></i>
      </Button>
      <Card.Body>{getRandomNumber(0, 101)}</Card.Body>
    </Card>
  );
};

export default MainCard;

以前我在我的 AddCard.js 中执行 onClick 功能，但由于某种原因，我创建的警报是在重新加载页面时以及在单击按钮时生成的。我想不通其中的道理，成了我至今无法翻越的墙。我很确定我错过了一些简单的东西，但我就是想不通那是什么。有什么想法可以实现吗？

Answer 1

您需要使用useState()。

例如

import { useState } from "react";

export default function App() {
  const [{items}, setItems] = useState({ items: [] });
  const addItem = () => {
    items.push(<div key={items.length}>Hello</div>);
    setItems({ items: [...items] });
  };

  return (
    <div>
      <button onClick={addItem} />
      {items}
    </div>
  );
}

这将创建一个持久存储，您可以将值设置到其中，在组件重建之间保留。存储中的对象有一个键“items”和一个包含项目的数组。使用描述内容的键将状态放入对象中很方便。如果您需要调试您的应用程序，这允许您告诉您正在查看的状态对象。

addItem() 回调会将新项目添加到状态中的对象中。重要的是，该项目有一个应该是唯一的关键属性。这有助于反应监视数组中元素的状态。

可以看上面代码的demohere

Answer 2

如 Charles Bamford 的回复所述，您必须使用 useState 方法。 useState 方法创建一个变量和一个方法来设置这个变量的值。每次你改变一个状态（使用它的 setter）React 都会检查代码并在它被使用的地方重新渲染。您将需要这样的东西：

const App = () => {
  const [cards, setCards] = useState([]); // instantiate cards as a empty Array

  const addCard = () => {
    // create a new array with the old values and the new random one
    const newCards = [...cards, Math.floor(Math.random() * 100)];

    setCards(newCards);
  };

  const removeCard = (cardIndex) => {
    // create a new array without the item that you are removing
    const newCards = cards.filter((card, index) => index !== cardIndex);

    setCards(newCards);
  };

  return (
    <body>
      <header>
        <div className="ui buttons">
          <button className="ui button mb-1 mt-1" onClick={() => addCard()}>
            <i className="plus icon"></i>
            Add Card
          </button>
          <div className="or mb-1 mt-1"></div>
          <button
            className="ui positive button mb-1 mt-1"
            onClick={() => addCard()}
          >
            <i className="sort numeric down icon"></i>
            Sort All
          </button>
        </div>
      </header>
      <main>
        {cards.map((cardNumber, index) => (
          <MainCard number={cardNumber} onRemove={() => removeCard(index)} />
        ))}
      </main>
    </body>
  );
};

有了像这样的数组 [10, 15, 33]，cards.map 会为你做这样的事情：

  <main>
    <MainCard number={cards[0]} onRemove={() => removeCard(0)} /> // 10
    <MainCard number={cards[1]} onRemove={() => removeCard(1)} /> // 15
    <MainCard number={cards[2]} onRemove={() => removeCard(2)} /> // 33
  </main>

我们正在将“number”和“onRemove”函数从 App 组件传递到 MainCard 组件。现在我们只需要从我们的道具中获取它，就像这样：

const MainCard = (props) => {
  const { onRemove, number } = props

  return (
    <Card>
      <Button
        className="ui mini red basic icon button"
        style={{
          position: "absolute",
          top: "0",
          right: "0",
        }}
        onClick={() => onRemove()}
      >
        <i
          className="red x icon"
          style={{
            position: "relative",
            top: "0",
            right: "0",
          }}
        ></i>
      </Button>
      <Card.Body>{number}</Card.Body>
    </Card>
  );
};

export default MainCard;

如何在单击按钮时创建卡片？

How do I create a card on button click?

javascript

onclick

reactjs

bootstrap-4

card