noUiSlider 作为 React 组件

Question

我正在尝试将 noUiSlider 插件转换为 React JS 组件。我有运行个问题。我似乎无法将滑块值绑定到正在创建的输入。滑块按预期显示和滑动。 HTML 中显示的输入也具有正确的 ID，只是没有显示任何值。这是我的 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 循环创建输入修复它。

Answer 2

你可以使用他们的 npm 包，https://www.npmjs.com/package/nouislider-react 并导入组件及其接受的各种动作和道具

noUiSlider 作为 React 组件

noUiSlider as a React component

reactjs

nouislider