フィルタインデックスの反応状態を更新

Question

私は自動車会社の小売業者のリストを掲載しているアプリを持っています。どの会社がリストで選択されているかを判断するために状態を使用し、選択された会社を使用して秀逸者などを作成します。最近まで、すべての小売業者を1つのリストに入れ、onChangeで状態を設定しました私は検索機能を実装しているので、50以上の小売業者をスクロールする必要はありませんでしたが、今では自分のIDを検索するとセレクト状態になることはありません。このように、検索すると自動的に状態をインデックス0に設定する方法はありますか？ここ

コード：事前に

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> 
) 
} 

ありがとう：

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> 
) 
} 

そして、ここでは私がsearchfunctionを実装まで働いていたselectboxlistが、あります！

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にfilterを入力して、インデックス0に結果を取得します。これはselectedAfになります。次に、検索タームと選択されたアイテムの状態を保存します。