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

Question

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

event.target.value

返回undefined。如何访问组件上的值？我希望最终拥有handlePlayersChange((，以便能够接受动态值。

const SearchForm = () => {
const [numPlayers, setNumPlayers] = useState([4, 6]);
const handleSubmit = (event: any) => {
event.preventDefault();
};
const handlePlayersChange = (event: any, newValue: any) => {
setNumPlayers(newValue);
};
return (
<form onSubmit={handleSubmit}>
<h1>Search for Games!</h1>
<div className="slidecontainer">
<Typography id="range-slider" gutterBottom>
Number of Players
</Typography>
<Slider
className="slider"
min={1}
max={8}
value={numPlayers}
onChange={handlePlayersChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
/>
</div>
<button>Search</button>
</form>
);

如有任何信息，我们将不胜感激！非常感谢。

Answer 1

也许你应该把滑块放在一个单独的组件中，并使用几个这样的滑块实例，根据你的例子，我得到了这样的东西：

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

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