材质 UI - 滑块事件处理程序

Question

我正在使用 vanilla Material UI slider 并尝试构建一个事件处理程序，以将滑块的当前值显示为输入上方的 h2 文本。

据我所知，像这样的状态级别的事件处理程序就足够了。

     handleInput = input => e => {
      this.setState({[input]: e.target.value});
      console.log(e)
      const aum = e.target.value;
      this.setState({aum});

      const data = [...this.state.data];
      const index = 4;
      data[index].aum = e.target.value;
      this.setState({data});

  }

然而，它不起作用，经过检查，滑块实际上不使用 target.value，而是使用名为 aria-valuenow 的东西。然后，我天真地将函数更改为：

     handleInput = input => e => {
      this.setState({[input]: e.target.aria-valuenow});
      console.log(e)
      const aum = e.target.aria-valuenow;
      this.setState({aum});

      const data = [...this.state.data];
      const index = 4;
      data[index].aum = e.target.valuenow;
      this.setState({data});

  }

然而，这返回了一个错误，因为在那个位置有一个带连字符的术语似乎是一个无效的 JSX 表达式。不完全确定从这里开始什么是正确的方法。

这是我的状态，以防万一（注意我用我的滑块引用键 aum）：

  state = { 
    selectBoxes: [
        {id:1, strategies:['Large cap','Small cap', 'Dividend','Offshore','IPO']},
        {id:2, strategies:['Large cap','Small cap', 'Dividend','Offshore','IPO']},
        {id:3, strategies:['Large cap','Small cap', 'Dividend','Offshore','IPO']},
    ],
     data: [
      {quarter: "2Q20", aum: 100},
      {quarter: "3Q20", aum: 200},
      {quarter: "4Q20", aum: 300},
      {quarter: "1Q21", aum: 400},
      {quarter: "2Q21", aum:500}
    ],
    aum:500
 }

问题

如果 target.aria-valuenow 是“无效表达式”，如何在我的事件处理程序中指向它？