Material UI Slider事件处理中如何正确获取aria-valuenow属性值

JavaScript 中包含连字符的对象属性名无法通过 . 运算符直接访问，你可以通过以下两种合法方式获取 aria-valuenow 的值：

• 方案1：使用DOM元素内置的getAttribute方法（更稳妥，无需考虑属性名格式）

  const sliderValue = e.target.getAttribute('aria-valuenow')
  

  注意该方法返回的是字符串类型，如果需要数值可以用Number()包裹转换。
• 方案2：使用方括号语法访问属性，属性名用引号包裹

  const sliderValue = e.target['aria-valuenow']
  

修正后的完整事件处理函数 #

你原有代码存在两个可优化点：连续调用3次setState可以合并为一次提升性能，最后一行的e.target.valuenow属于笔误没有对应属性，修正后代码如下：

handleInput = input => e => {
  const aumVal = Number(e.target.getAttribute('aria-valuenow'));
  const newData = [...this.state.data];
  newData[4].aum = aumVal;
  // 合并单次更新state
  this.setState({
    [input]: aumVal,
    aum: aumVal,
    data: newData
  });
}

更推荐的实现方式 #

Material UI Slider 组件的onChange回调会直接返回第二个参数为滑块当前值，无需手动读取DOM属性，实现更简单且性能更好：

// 滑块组件绑定事件写法
<Slider
  min={100}
  max={1000}
  step={100}
  value={this.state.aum}
  onChange={(e, value) => this.handleInput('aum')(value)}
/>

// 改造后的事件处理函数
handleInput = input => value => {
  const newData = [...this.state.data];
  newData[4].aum = value;
  this.setState({
    [input]: value,
    aum: value,
    data: newData
  });
}

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