在 Tag reactve中设置href属性

Question

我有以下代码：

<input id="number" type="number" value="1" min="1" max="10"> <a href="/products/add-to-cart/<%= products[i]["_id"] %>" class="btn btn-light">Add to cart</a>

此代码显示输入数字字段和链接到快递路线的按钮。

我的问题是，如何获得在输入​​字段中输入的数字作为标签的“ href”属性的参数？

我还需要将用户要添加到购物车的数量发送到我的路线，以便可以将其添加到购物车。

非常感谢您的帮助。

Answer 1

监听要在input:number节点上触发的更改事件，然后仅重置锚点节点上的href属性，如下例所示。也可以只使用click事件处理程序将window.location移至创建的URL或切换到form

document.querySelector('#number')
  .addEventListener('change', evt =>
  {
    const value = evt.target.value;
    document.querySelector('a').href = `/products/add-to-card/${value}`;
    console.log(`HREF is now : ${document.querySelector('a').href}`);
  }, true);

<input id="number" type="number" value="1" min="1" max="10">
<a href="/products/add-to-cart/1" class="btn btn-light">Add to cart</a>