Блог

Я работаю со слайдером пользовательского интерфейса vanilla Material и пытаюсь создать обработчик событий для отображения текущего значения слайдера в виде 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 в моем обработчике событий, если это «недопустимое выражение»?