noUiSlider als eine React-Komponente

Question

Ich versuche, das NoUiSlider-Plugin in eine React-JS-Komponente zu konvertieren. Ich bin auf ein Problem gestoßen. Ich kann nicht scheinen, die Slider-Werte an die Eingänge zu binden, die erstellt werden. Der Schieberegler zeigt und gleitet wie vorgesehen. Die Eingaben zeigen im HTML auch die korrekten IDs, nur keine Werte werden angezeigt. Hier ist meine JSX:

class Slider extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     start: this.props.start, 
     connect: this.props.connect, 
     step: this.props.step, 
     orientation: this.props.orientation, // 'horizontal' or 'vertical' 
     range: this.props.range, 
     format: this.props.format 
    } 
    this.handleSliderChange = this.handleSliderChange.bind(this); 
} 
componentDidMount() { 
    let slider = this.props.id; 
    noUiSlider.create(slider, { 
     start: this.state.start, 
     connect: this.state.connect, 
     step: this.state.step, 
     orientation: this.state.orientation, 
     range: this.state.range, 
     format: this.state.format 
    }); 
    slider.noUiSlider.on('update', this.handleSliderChange); 
} 


onChangePage = (event, item) => { 
    this.props.onChange(event); 
} 
render() { 
    let inputs = []; 
    for (let i = 0; i < 2; i++) { 
     inputs.push(<div key={i}><input id={this.props.inputs[i].id} 
    onChange={this.onChangePage} value={this.state.start[i]} type="text" /> 
    </div>);} 
    let input2 = this.props.inputs.map((input, inputKey) => { 
     return this.props.start.map((prop, propKey) => { 
      return <div><input key={inputKey} id={input.id} onChange= 
     {this.onChangePage} type="text" /></div>; 
     }); 
    }); 
    return (
     <div> 
      <div className="slider-value-container clearfix"> 
       {inputs} 
      </div> 
      <div id={this.props.id} className="slider"></div> 
     </div> 
    ) 
} 

}

Und hier ist, wo ich die Komponente auf meiner Seite bin mit:

<Slider 
    id="sqftSlider" 
    value={[this.state.lowerValue, this.state.higherValue]} 
    inputs={sqftSlider} 
    onChange={this.handleFilterChange} 
    range={{ min:0, max: 5000 }} 
    start={[0, 5000]} 
    format={wNumb({ 
    decimals: 0, 
    thousand: ',' 
    })} 
    orientation="horizontal" 
    connect={true} 
    step={100} 
/> 

Dies ist das Array, das für die Eingänge in der ID passiert.

const sqftSlider = [{ 
    id: 'lowerSqftSlider' 
}, 
{ 
    id: 'upperSqftSlider' 
}]; 

Irgendwelche Hilfe geschätzt!

Answer 1

Der aktualisierte Code oben behoben mein Problem. Erstellen Sie die handleSliderChange() und setzen Sie alle Slider-Handle-Werte dort zusammen mit der for-Schleife, die die Eingaben erzeugt, um sie zu fixieren.