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组件

2 个答案: