從 Material UI Slider 組件獲取值

Question

我在嘗試訪問已添加到組件的 value 屬性時遇到問題。

event.target.value

返回未定義。 如何訪問組件上的值？ 我希望最終讓 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

也許您應該將 slider 放入一個單獨的組件中，並使用此類滑塊的多個實例，根據您的示例，我得到了這樣的結果：

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

在這種情況下，您可以通過名稱區分不同滑塊的值