为 setState 反应钩子

Question

I am trying to figure out how to use Hooks to display the number that a slider is at. This number should change as the slider moves. I had this working without hooks, but now I'm trying to make it work with them as I think it's important to learn. I feel like I'm close to solving this, but there's just some knowledge that I don't have that I need to make it work. Have any advice or help? Thanks! I left my previous code attached commented out so you can see how it worked. My code below:

JS(Babel):

Slider = () => {
// function Slider() {

  const [value, setValue] = useState(120.5);
  // state = { value: 120.5 };

  useEffect(() => {})
  // onUpdate(e) {
  //   this.setState({
  //     value: e.target.value
  //   });
  // }  

  return (
    <div className="slider-box">
      <div>
        <label className="slider-label">{value}c</label>
        <p className="slider-title">Scale</p>
      </div>
      <StyledSlider
        list="tickmarks"
        max={1200}
        onChange={() => setValue(value + 1)}
        step={0.01}
        type="range"
        value={value} //{this.state.value}
      />
      <div> 
        <p className="slider-scale">1200 x 1200</p>
      </div>
    </div>
  );
}

Answer 1

You can do that using the same logic you were before. There is no reason to increment your state one by one, just use the value you get from the event like you were doing previously in your onUpdate handler.

Slider = () => {
// function Slider() {

  const [value, setValue] = useState(120.5);
  // state = { value: 120.5 };


  const onUpdate = (e) => {
     setValue(e.target.value);

   }  

  return (
    <div className="slider-box">
      <div>
        <label className="slider-label">{value}c</label>
        <p className="slider-title">Scale</p>
      </div>
      <StyledSlider
        list="tickmarks"
        max={1200}
        onChange={onUpdate}
        step={0.01}
        type="range"
        value={value} //{this.state.value}
      />
      <div> 
        <p className="slider-scale">1200 x 1200</p>
      </div>
    </div>
  );
}