Javascript 从材质UI滑块组件获取值

尝试访问添加到组件的value属性时遇到问题

event.target.value

返回未定义的。如何访问组件上的值？我希望最终让handlePlayersChange（）能够接受动态值

const SearchForm=（）=>{
const[numPlayers，setNumPlayers]=useState（[4,6]）；
const handleSubmit=（事件：any）=>{
event.preventDefault（）；
};
const handlePlayersChange=（事件：any，新值：any）=>{
setNumPlayers（新值）；
};
返回(
搜索游戏！
球员人数
搜寻
)

也许您应该将滑块放入一个单独的组件中，并使用多个此类滑块的实例，根据您的示例，我得到如下结果：

import React from "react";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";

const SearchSlider = ({ onChange, name }) => {
  const [numPlayers, setNumPlayers] = React.useState([4, 6]);

  const handlePlayersChange = (event: any, newValue: any) => {
    setNumPlayers(newValue);
    onChange({name, newValue});
  };

  return (
    <div className="slidecontainer">
      <Typography id="range-slider" gutterBottom>
        Number of Players {name}
      </Typography>
      <Slider
        className="slider"
        min={1}
        max={8}
        name={name}
        value={numPlayers}
        onChange={handlePlayersChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
      />
    </div>
  );
};

export default function SearchForm() {
  const [numPlayersBySliders, setNumPlayersBySliders] = React.useState([]);

  const handleSubmit = (event: any) => {
    event.preventDefault();
  };

  const onChange = ({ newValue, name }) => {
    const clearState = numPlayersBySliders.filter(s => s.name !== name);
    const newItem = { name, numPlayers: newValue };
    setNumPlayersBySliders([...clearState, newItem]);
    console.log(numPlayersBySliders);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Search for Games!</h1>
      <div className="slidecontainer">
        <SearchSlider onChange={onChange} name="Slider_1" />
        <SearchSlider onChange={onChange} name="Slider_2" />
      </div>
      <button>Search</button>
    </form>
  );
}

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Slider”导入滑块；
常量搜索滑块=（{onChange，name}）=>{
const[numPlayers，setNumPlayers]=React.useState（[4,6]）；
const handlePlayersChange=（事件：any，新值：any）=>{
setNumPlayers（新值）；
onChange（{name，newValue}）；
};
返回(
玩家人数{name}
);
};
导出默认函数SearchForm（）{
const[numPlayersBySliders，setNumPlayersBySliders]=React.useState（[]）；
const handleSubmit=（事件：any）=>{
event.preventDefault（）；
};
const onChange=（{newValue，name}）=>{
const clearState=numPlayersBySliders.filter（s=>s.name！==name）；
const newItem={name，numPlayers:newValue}；
setNumPlayersBySliders（[…clearState，newItem]）；
控制台日志（numPlayersBySliders）；
};
返回(
搜索游戏！
搜寻
);
}

---

在这种情况下，您可以通过名称区分不同滑块的值

Hi，请尝试以下操作：const-handlePlayersChange=（事件：any，newValue:number | number[]）=>{setNumPlayers（newValue作为数字）；}；对于新值，将编号设置为type@mfaccord我不确定我是否了解，您希望从哪个组件访问哪个值？@julio在该组件上计算值。我将添加更多滑块，并需要能够根据其分配的值识别哪个滑块是哪个滑块。每个滑块不是都有自己的

onChange

回调吗？意思是你可以分辨出是哪个滑块引起了更改。@juliomalves他们每个人都可以有自己的回调。但由于他们基本上都在做相同的事情，我打算将其重构为一个方法，但找不到区分每个滑块的方法。