Material UI: 如何通过按钮的 onClick 事件获取滑块值？

Question

我有一个由几个滑块组成的表单，最后有一个提交按钮。

在非 React 环境中，我通常会有一个为按钮 onClick 属性调用的函数，它会遍历所有滑块并转到 document.getElementById('mySliderIdX').value。

但是在 React 中使用 Material UI，我无法通过这种方式访问滑块值。如果我尝试这样做，我会得到一个没有 value 属性.

的 span 元素

如何使用按钮获取所有滑块的值？

我的代码在这里：

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>
  )
}
}

Answer 1

您必须使用组件的值属性。像这样：

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>
  );
}

Material UI: 如何通过按钮的 onClick 事件获取滑块值？

Material UI: how to get slider values with a button's onClick event?

slider

reactjs

material-ui