Eingangsfilterung in reactjs

Question

Ich arbeite an E-Commerce-React/Redux-Projekt, ich möchte Funktionalität, mit der Benutzer können die Produkte nach Preisfilter anzeigen, habe ich zwei Eingabefelder gemacht, in denen Benutzer Min und Max eingeben können Preiswert und kann die Produkte angezeigt werden, die zwischen dem Preisbereich liegen, die Funktionalität arbeitet onChange aber nicht die Produkte zwischen dem Bereich anzeigt, ist es allgemeine Produkte anzeigt

kann mir jemand helfen, dieses Problem zu sortieren, Dank Im Voraus, Mein Code und Screenshot ist unter

---

beigefügt

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} 
           onChange={this.onValueChangeComplete} 
          />, 
         'filter.price-range-min' 
       )} 
       </div> 
      </div> 
     ); 
    } 
} 

Komponente in denen muss ich

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

Dies ist nicht wirklich ein Fix (ich glaube nicht) ist der Preis-Funktionalität verwendet, aber vielleicht kann es Ihnen näher zu bringen eine Lösung. Ich habe einige Änderungen an Ihrem Code vorgenommen und Kommentare hinzugefügt, in denen ich Änderungen vorgenommen habe.

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

     this.state = { 
      // NOTE: I don't know how props.values looks. maybe this is wrong 
      min: props.values.min, 
      max: props.values.max 
     }; 
     this.onValueChangeComplete = this.onValueChangeComplete.bind(this); 
    } 

    onValueChangeComplete(minOrMax, newValue) { 
     const { onValueChange } = this.props; 
     this.setState(
      {[minOrMax]: newValue}, // update the property "min" or "max" with the new value 
     () => onValueChange(this.state) // when the state change is done, send both min and max to onValueChange 
     ); 
     // onValueChange(this.state.value); 
    } 


    render() { 
      // not sure what "limits" are used for 
     // maybe you want to use an input with type="number" and 
     // use the attributes "min" and "max" ? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number 
     const { currencyCode, limits } = this.props; 
     const { min, max } = this.state; // this is new. 
     const notChanged = _.isEqual(value, limits); 

     return (
      <div className={styles.wrapper}> 
       <div className={styles.inputWrapper}> 
        {I18n.getComponent(
         (formattedValue) => 
          <input 
                  value={ min } // this is new 
           type="text" 
           name="min" 
           className={styles.textInput} 
           placeholder={formattedValue} 
           onChange={ event => this.onValueChangeComplete('min', event.target.value) } // this was missing before 
          />, 
         'filter.price-range-min' 
       )} 
       <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span> 
        {I18n.getComponent(
         (formattedValue) => 
          <input 
           value={ max } // this is new 
           type="text" 
           name="max" 
           className={styles.textInput} 
           placeholder={formattedValue} 
           onChange={ event => this.onValueChangeComplete('max', event.target.value)} 
          />, 
         'filter.price-range-min' 
       )} 
       </div> 
      </div> 
     ); 
    } 
}