noUiSliderをReactコンポーネントとして

Question

noUiSliderプラグインをReact JSコンポーネントに変換しようとしています。私は問題に遭遇しました。私は作成されている入力にスライダの値をバインドするように見えません。スライダが意図したとおりに表示され、スライドします。入力は正しいIDとともにHTMLに表示され、値は表示されません。ここに私の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> 
    ) 
} 

}

そして、ここで私は自分のページ上のコンポーネントを使用しています場所です：

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

これは、入力のIDを渡し配列です。

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

Answer 1

上記の更新されたコードは、私の問題が修正されました。 handleSliderChange（）を作成し、すべてのスライダーハンドルの値をforループとともに入力を作成してそれを固定します。