如何在按钮单击时创建卡片？
Posted
技术标签:
【中文标题】如何在按钮单击时创建卡片？【英文标题】：How do I create a card on button click? 【发布时间】：2021-05-31 11:57:33 【问题描述】：我已经学习了几天 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>
它们位于我页面顶部的标题容器中。如下图所示。
我希望能够单击“添加卡片”按钮，然后让它在我的卡片容器中创建一张新卡片。如下图。
您在上图中看到的当前卡片目前是硬编码的。我创建了一个 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 功能，但由于某种原因，我创建的警报既是在重新加载页面时生成的，也是在单击按钮时生成的。我无法弄清楚其中的原因，它已成为我还无法爬过的墙。我很确定我错过了一些简单的东西，但我就是不知道那是什么。有什么想法可以实现吗？
【问题讨论】：
我没有看到你的提醒。 警报已被删除，它目前不在我上面提供的代码中。 如果您不使用它，将其包含在您的问题中会令人困惑。 我把它作为我尝试过的一个例子。我很抱歉。 【参考方案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>
);
这将创建一个持久存储，您可以将值设置为在组件重建之间保留的值。存储中的对象有一个键“项目”，其中包含一个包含项目的数组。将您的状态放在一个带有描述内容的键的对象中很方便。如果您需要调试您的应用程序，这可以让您知道您正在查看的状态对象。
addItem() 回调会将一个新项目添加到处于状态的对象中。重要的是，该项目具有应该是唯一的关键属性。这有助于反应监控数组中元素的状态。
可以看上面代码的demohere
【讨论】：
在返回 此示例创建一个按钮，该按钮将不断向列表中添加新项目。如果您只想要一张卡片，请将其添加到 addItem() 中，然后确保在添加卡片后禁用或删除按钮。 我正在传播这些项目，因为我忘记了 react 不是这样工作的。您无需担心展开运算符 (...)。 你太棒了。是的，它正在代码演示中显示。我添加了我的 MainCard 组件来代替 Hello 文本。所以现在它创建了卡片，但它是在按钮内创建的。然后我意识到我可以在按钮之后删除 item，就像你出现在那里一样，添加我的文本，在这种情况下是 Add Card，然后将 item 向下移动到我的卡片容器中。它完美地工作。你帮了我很多，我真的很感激你。【参考方案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 组件。现在我们只需要从我们的 props 中获取它，就像这样：
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;
【讨论】：
我也在测试你的解决方案，但我得到了一个错误。无法读取未定义的属性“地图”。我正在网上搜索解决方案，但一直找不到解决问题的方法。知道这意味着什么吗？ 这是初始值吧？常量 [ 卡片 , setCards] = useState([]);因此它将值视为一个空数组。那 .map 不就行了吗？ 现在可以使用了。我看到上面更新的代码并测试了它。 你能解释一下 removeCard 函数是什么吗？是不是要拆卡？目前它只是用一个新的替换 int。 当然。我看到你的卡片有一个删除按钮，所以你必须将它从你的 App 组件传递到你的 MainCard 组件。你这样做的方式是将它传递给你的 MainCard 组件，如下所示：以上是关于如何在按钮单击时创建卡片？的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮后如何显示下一张卡片并再次单击并再次显示下一张卡片到最后一张卡片并使用jquery提交？
当我使用 laravel 6.0 单击添加到卡片按钮时，我想将产品项目显示到购物车中？
[我想使用laravel 6.0单击添加到卡片按钮时将商品显示到购物车中？