-3

我正在构建一个 DApp，但用户输入元数据和图像来铸造 NFT。

这一切都很好，但我想添加一个数量函数，它实际上将他们输入的 NFT 的# of NFT 最小为 1，最大为 100。

现在我有数量作为状态变量

    const [quantity, setQuantity]= useState("");

我有一个按钮，按下时连接到函数 {onMintPressed}

     <button onClick={ onMintPressed }> Mint NFT </button>

现在数量只是此代码的输入

                     <label className={classes.customLabel}>Quantity </label>
              <input
                className={classes.customInput}
                type="number"
                min={1}
                max={100}
                placeholder="1-100"
                onChange={(event) => setQuantity(event.target.value)}

我对此并不陌生，但理想情况下，在一个完美的简单编码世界中，该函数看起来像这样

    <button onClick={onMintPressed * x(quantity)}> Mint NFT </button>

我知道这不起作用，本身也不是一个函数，但这只是解释我想要做的最简单的方法

任何帮助表示赞赏，谢谢！

4

1 回答 1

0

为 onClick 处理程序创建一个匿名函数() => {...}。并在其中调用您的函数onMintPressed(quantity)。

<button onClick={()=>{onMintPressed(quantity)}}> Mint NFT </button>

此外，您的quantity状态变量是一个字符串，因此在将其用于数量时要考虑到这一点。

更新 您还可以使您的onMintPressed方法成为点击处理程序。它将事件作为参数传递，但您可以忽略它。然后在该函数中，抓住它，quantity因为它是一个状态变量。

<button onClick={onMintPressed}> Mint NFT </button>

const onMintPressed = (event) => {
  const quantityAsNumber = +quantity
  console.log('quantity is', quantityAsNumber)
}

更新 2 我不确定你想做什么，但你可以quantity通过简单地将其粘贴在 for() 循环中来调用一些“铸币”函数时间。我还添加了 async/await 关键字，因此每个“mintSomething()”调用都会阻塞，直到它们完成。这是非常基本的，所以也许我误解了你想要做什么。

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  for (let i=0; i < quantity; ++i) {
    await mintSomething()
  }
}

发布答案接受更新 哎呀。我在上面写道，这些mintSomething()调用将并行工作，但事实并非如此。每个都将阻塞，直到完成。要并行铸造事物，您只需坚持每个 mintSomething 请求返回的承诺，然后等待所有这些。

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  const promises = []
  for (let i=0; i < quantity; ++i) {
    promises.push(mintSomething())
  }
  await Promise.all(promises)
}
于 2022-01-19T01:28:38.080 回答