Блог

У меня есть форма, состоящая из нескольких ползунков с кнопкой отправки в конце.

В среде, не связанной с реакцией, у меня обычно была бы функция, вызываемая для свойства кнопки onClick , где она перебирала бы все ползунки и переходила document.getElementById('mySliderIdX').value .

Но с Material UI в React я не могу получить доступ к значениям слайдера таким образом. Если я попытаюсь это сделать, я получу элемент span без value свойства.

Как мне получить значение всех моих ползунков с помощью кнопки?

Мой код здесь:

 let getSliderValues = function (arrOfIDs) {
  let ratings = {}
  arrOfIDs.forEach(name_id => {    
    let slider = document.getElementsByName(name_id);
    ratings[name_id] = slider.value // this is undefined
  });
  console.log("slider values: ",ratings)
}

class MySliders extends Component(){
this.sliders = ["a","b","c"]

render(){
  return(
    <div>
      <Slider id={this.sliders[0]} />
      <Slider id={this.sliders[1]} />
      <Slider id={this.sliders[2]} />
      <button onClick={e=>this.getValues(this.sliders)}>submit</button>
    </div>
  )
}
}

 

Вы должны использовать свойство value компонента. Что-то вроде этого:

 import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Slider from '@material-ui/core/Slider';


export default function DiscreteSlider() {
  const [ratings, setRatings] = useState([0, 0, 0]);
  let getSliderValues = function () {
    console.log("slider values: ", ratings)
  }
  const getSliders = () => {
      const sliders = [];
      ratings.forEach((rating, index) => {
        sliders.push(<Slider
          key={index}
          value={ratings[index]}
          onChange={(event, newValue) => {
            ratings[index] = newValue;
            const newRatings = [...ratings];
            setRatings(newRatings);
          }}
        />)
      });
      return sliders;
  }

  return (
    <div>
      {getSliders()}
      <Button onClick={e=>getSliderValues()}>submit</Button>
    </div>
  );
}