如何在reactjs中設置多個過濾器

Question

我閱讀了stackoverflow中的質量檢查內容，但沒有介紹如何同時設置受控的單人和多人，

我有一個多重過濾器，但是有時候當我們進入反應形式時，只能選擇一個或多個

  handleChange = (e) => {

    const target = e.target;
    const value = target.value;
    const name  = target.name;
    this.setState({[name]:value})
    this.props.onChange({[name]:value})
  }

..................

carPrice: 
<input 
name="carPrice" 
type="text"  
value={this.state.carPrice} 
onChange={this.handleChange}/> 

price_category : 
<select 
name="price_category" 
value={this.state.price_category} 
onChange={this.handleChange} >
    <option >Select</option>
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
</select>

這是表格，用戶可以同時選擇一個或多個過濾器。 用戶輸入時的輸出看起來像

{price_category: "low"}

如果給車價

{ carPrice: "20000"}

在這里過濾

在這里，我們過濾狀態，

f = (filterparams)=>{

    //filterparams ---> {price_category: "low"} 

    let filtercars = this.state.cars // car array here


    filtercars = filtercars.filter
    (
        car=> {return car.carPrice <= filterparams.carPrice || 
        car.price_category === filterparams.price_category }
    )

      this.setState({
        filtercars
    })
  }

問題

• 選擇車價為 5000，其價格下的展示車=做工精細
• 然后選擇價位高 ，顯示5000和高 =做工精細車下
• 然后選擇車價 1000，顯示價格類別 高的所有車=不工作

---

編輯

  render() {
    return (
      <div>
        <CarResult cars={this.state.filtercars} onChange={this.f}/>
      </div>
    )
      }

Answer 1

這是CodeSandBox，用於在反應列表中的項目上設置多個過濾器。 創建回答后，這個問題的討論 。

類似問題的提示

1. 將list/array和filter variables保留在父組件中
2. 過濾render(){}的列表，不要setState只是作為prop傳遞給子組件
3. 通過this.HandleChange作為道具

Answer 2

您能否更具體地回答您的問題？

根據我的理解，就像您對它進行編程一樣，它可以正常工作。 如果您已經將類別狀態設置為高，並且僅將價格更改為1000，則其應顯示類別高以下的所有汽車低於1000。

如果您不希望這種情況發生，則每次更改價格時都必須重置類別狀態