價格過濾reactjs

Question

我正在從事電子商務React/Redux項目，我想使用戶可以根據價格滑塊顯示產品的功能，我做了兩個輸入字段，用戶可以在其中輸入最小和最大值價格超值，此功能正在按一下按鈕，但我想在更改事件，當用戶鍵入第二個值它過濾產品的onChange，

誰能幫助我理清這個問題，在此先感謝，我的代碼並在下面附加屏幕截圖

---

class PriceInput extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      value: props.values, 
     }; 
     this.onValueChangeComplete = this.onValueChangeComplete.bind(this); 
    } 

    onValueChangeComplete() { 
     const { onValueChange } = this.props; 

     onValueChange(this.state.value); 
    } 


    render() { 
     const { currencyCode, limits } = this.props; 
     const { value } = this.state; 
     const notChanged = _.isEqual(value, limits); 

     return (
      <div className={styles.wrapper}> 
       <div className={styles.inputWrapper}> 
        {I18n.getComponent(
         (formattedValue) => 
          <input 
           type="text" 
           name="min" 
           className={styles.textInput} 
           placeholder={formattedValue} 
          />, 
         'filter.price-range-min' 
       )} 
       <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span> 
        {I18n.getComponent(
         (formattedValue) => 
          <input 
           type="text" 
           name="max" 
           className={styles.textInput} 
           placeholder={formattedValue} 
          />, 
         'filter.price-range-min' 
       )} 
       </div> 
      </div> 
     ); 
    } 
} 

組件中，我不得不用價格的功能

case 'price': 
          childComponent = (
           <PriceInput values={facet.data} 
            limits={facet.data} 
            currencyCode={this.props.currency.code} 
            onValueChange={(data) => this.onSearchChange(facet.code, data)}/> 
          ); 
          break; 

Answer 1

這會是這樣的：

handleMaxChange(event) { 
    const minValue = '' // I'm assuming you already have max's value saved somewhere 
    const { value } = event.target 

    if (minValue && value) { 
    this.props.onValueChange(/* send values here */) 
    } 
} 

render() { 
    return (
    ... 
    <input 
     type="text" 
     name="max" 
     className={styles.textInput} 
     placeholder={formattedValue} 
     onChange=={handleMaxChange} 
    /> 
) 
}