时间戳

首页 > 解决方案 > 在 javascript 中动态推送即将到来的 id 和 value

javascript - 在 javascript 中动态推送即将到来的 id 和 value

问题描述

这个问题可能看起来有点混乱，所以让我解释一下情况，我有一个类别字段，当它被选择时，我会根据该类别从 api 获取数据，例如当你选择类别 A 时，你可能会得到 id 的 1 到3 或者当您选择 B 类时，您会得到 8 到 11 的 id，所以我要做的是创建一个过滤器数组，该数组使用 id 推送这些值，因此当用户sth在 id 为 1 的输入中键入类似内容时，这个对象被推送到数组中，如下所示：

Filters = [ 
   {
     id:1,
     value: sth
   }
]

所以我所做的基本上是这样的：

this.props.Filters.map(item => (
     <div className="from" key={item.id} id={item.id} >
          <span className="title">{item.feature}</span>
          <input type="text" placeholder="..." id={item.id} onChange={FilterPush}></input>
     </div>
))

功能是：

const Filters = []
const FilterPush = (e) => {
      const filter = {
           id: e.currentTarget.getAttribute("id"),
           value: e.currentTarget.value
       }
       Filters.push(filter)
}

我在这里遇到的问题是每次用户输入某个对象被推送到的东西Filters时，所以当用户尝试输入时sth，Filter得到等于：

Filters={
    {id:1,value:s},
    {id:1,value:st},
    {id:1,value:sth}
}

但我希望它等于这个

Filters={
    {id:1, value:sth}
}

请记住，id 是动态的，我不认识它们，而且不只有一个输入，我的意思是我们可以有 3 个输入不同的 id，应该发送到服务器。

标签： javascriptarraysreactjspush

解决方案

只需过滤掉现有的 id：

const FilterPush = (e) => {
      let id = e.currentTarget.getAttribute("id")
      const filter = {
           id,
           value: e.currentTarget.value
       }
       Filters = Filters.filter(item => item.id !== id) // filter out existing id
       Filters.push(filter)
}

推荐阅读