Question

我有一个应用程序，我列出了一堆汽车公司的零售商。我使用状态来确定在列表中选择哪个公司，并且他们使用所选公司来生成销售人员等等，直到最近我将所有零售商放在一个列表中，并使用onChange设置状态，但是，零售商已经得到了很多，我实施了一个搜索功能，所以他们不必滚动超过50个零售商，但现在我不能设置状态，因为，如果他们搜索自己的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，直到我实现搜索功能一直工作：

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等）未知。但逻辑应该有效。

但基本上，如果输入输入了某些内容，请在filter上执行af并在索引0处获得结果。这将是我们的selectedAf。然后，使用搜索词和所选项保存状态。

在过滤器索引上反应更新状态

1 个答案: