我正在使用antd slider 组件。我正在尝试实现一个范围 slider ,它也与两个数字输入绑定(bind),如下面所附的图像
在给定链接 https://codesandbox.io/s/icy-framework-xpvl9 中查找我的代码。在向 slider 组件添加范围 Prop 时,它会引发错误。我对在与范围 slider 绑定(bind)的数字输入中实现最小值和最大值的逻辑感到困惑。
<Slider
className="slider-main-div"
min={min}
max={max - 1}
onChange={this.onChange}
value={typeof inputValue === "number" ? inputValue : 0}
/>
<div className="range-input-number-main">
<InputNumber
className="min-input-main"
min={min + 1}
max={max - 1}
value={inputValue}
onChange={this.onChangeMin}
/>
<span className="range-span">to</span>
<InputNumber
className="min-input-main"
min={21}
max={50}
value={inputValue}
onChange={this.onChangeMax}
/>
最佳答案
我修改了确定 Input
的最大/最小值的方式,并添加了 ant design 为 Slider< 提供的
。我还删除了 range
属性this.state.inputValue
,因为它似乎不需要。
这是带有范围
的更新后的Slider
。
<Slider
className="slider-main-div"
min={0}
max={100}
onChange={this.onChange}
range={true}
defaultValue={[min, max]}
value={[min, max]}
/>
您当前执行此操作的方式会导致堆栈大小错误,因为您将最大/最小值重新分配给 this.state.min
和 this.state.max
组件本身。因此,当您更改 App
状态时,antd 组件会在渲染中更新其初始化的 props,然后在按照 App
状态重新渲染时更新 antd 组件的状态改变,导致栈深度错误。
我最终给了它们 0-100 之间的默认值,并在函数中编写了一个条件来确定何时设置状态。例如,在 onChangeMin
中,仅当 value
小于 this.state.max
时才设置状态。否则不设置状态。这样,min 的输入值永远不会超过 max 的输入值。
onChangeMin = value => {
if (this.state.max > value) {
this.setState({ min: value });
}
};
与 onChangeMax
相同,但这次将 value
与 this.state.min
进行比较,并确保它不小于该值。
onChangeMax = value => {
if (this.state.min < value) {
this.setState({ max: value });
}
};
您可以找到完全更新的代码here .
关于javascript - 实现 slider 的范围与数字输入绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60379304/