响应过滤器索引的更新状态

Question

我有一个应用程序，我列出了一家汽车公司的一群零售商。我使用一种状态来确定在列表中选择哪一家公司，而他们使用所选的公司生成超列表等等，直到最近，我还让所有零售商都在一个列表中和一个设置状态的onChange中，然而，零售商已经得到了太多，所以我实现了一个搜索函数，这样他们就不必在50+零售商中滚动，但是现在我不能设置状态，因为如果他们搜索自己的ID，他们会弹出自己的ID，但是我不能像这样设置状态，但是当我搜索时，有什么方法可以自动设置状态来索引0呢？

这里的代码：

const FilterList = ({ ...props }) => {
return (
<div className="filter-list">
  <div className="row">
    <p className="headline text-left">Välj återförsäljare först</p>
  </div>
  <div className="row">
    <div className="group">
      <input
        required
        className="input-text"
        type="text"
        onChange={(ev) => props.updateFilter(ev)}
      />
      <span className="highlight"></span>
      <span className="bar"></span>
      <label>Sök återförsäljare via id</label>
    </div>
  </div>
  <AfSelect af={props.af} filterBy={props.filterBy} selectedAf={props.selectedAf} />
</div>
)
}

下面是selectboxlist，它一直工作到我实现了searchfunction：

const AfSelect = ({ ...props }) => {
return (
<div>
  <select className="select-input" onChange={(ev) => props.selectedAf(ev)}>
    {
      props.af.filter(item => item.afid.indexOf(props.filterBy) > -1)
        .map((item, index) => {
          return (
            <option
              key={index}
              value={item.afid}
            >
              {item.name} {item.afid}
            </option>
          )
        })
    }
  </select>
  <p></p>
</div>
)
}

提前感谢！

Answer 1

我只需要修改updateFilter()函数。由于您希望在用户输入筛选器时应用此方法，因此在更改输入值时执行此操作是有意义的：

updateFilter = (ev) => {
  let obj = Object.assign({}, this.state);
  if(ev.target.value.length > 0) {
    let name = af.filter(item => item.afid.indexOf(ev.target.value) > -1)[0];
    obj.selectedAf = name;
  }
  obj.filterBy = ev.target.value;
  this.setState(obj);
}

以上只是一个简单的例子，说明您如何实现这一点。根据您提供的有限代码，某些变量(如af等)的范围是未知的。但逻辑应该可行。

但是，基本上，如果输入有什么输入，在af上执行一个af并在索引0上获得结果。这将是我们的selectedAf。然后，使用搜索项和所选项保存状态。