React 三步range滑块取值异常无法正确设置固定值如何解决？

• setState为异步更新API，直接在setState调用后打印this.state.value获取的是更新前的旧值，会造成取值错误的误判
• 你当前使用普通函数定义handleToggle，如果没有在构造函数中绑定this指向，会导致setState无法正常触发，状态更新失效
• input[type=range]返回的value为字符串类型，初始化状态时value为数字类型，类型不匹配可能导致绑定异常

首先修正状态逻辑，保证this指向正确、类型统一，可在setState回调中获取更新后的真实值：

constructor(props) {
  super(props)
  this.state = {
    value: 1
  }
  // 绑定函数this指向
  this.handleToggle = this.handleToggle.bind(this)
}

handleToggle(key, value){
  // 转为数字后存入state，保证类型统一
  this.setState({ [key] : Number(value)}, () => {
    // 回调内打印的是更新后的真实值
    console.log(this.state.value)
  })
}

如果需要点击滑块任意位置直接跳转到对应固定刻度，不用逐步滑动调整，可通过datalist关联刻度实现：

<div className="theme-num">
  <div className="themeNumber">1</div>
  <div className="themeNumber">2</div>
  <div className="themeNumber">3</div>
</div>
<div className="toggle-radio">
  <input 
    type='range' 
    min='1' 
    max='3' 
    step='1' 
    value={this.state.value}
    onChange={(e) => this.handleToggle('value', e.currentTarget.value)}
    list="range-ticks"
  />
  <datalist id="range-ticks">
    <option value="1" />
    <option value="2" />
    <option value="3" />
  </datalist>
</div>

如果你需要将滑块固定为某个不可修改的数值，直接给input添加readOnly属性即可。

内容的提问来源于stack exchange，提问作者David