为什么DOM不随ReactJS中的状态变化而更新？

Question

我想使用滑块更新元素的字体大小。滑动滑块时，值会更改，并且可以使用将其成功存储到状态中e.target.value。

但是问题是字体大小没有按我预期的那样更新。我不知道为什么？

这是我的React组件代码：

import React, { useState } from 'react';

function App() {
  const [slider, setSlider] = useState(20);

  const handleChange = (e) => {
    setSlider( e.target.value );
    console.log(slider);
  }

  return (
    <div className="container">
        <label style={ { fontSize: slider } }>Example range</label>
        <input 
          type="range" 
          className="custom-range" 
          id="customRange1"
          min="10" 
          max="30"
          defaultValue={slider}
          onChange={handleChange}
        /> 
    </div>
  );
}
export default App;

Answer 1

如果defaultValue用valueprop 替换，并如下所示更新<label>元素style，则组件将按预期工作：

function App() {
  const [slider, setSlider] = useState(20);

  const handleChange = (e) => {
    setSlider( e.target.value );
    console.log(slider);
  }

  return (<div className="container">
        {/* Format valid value for fontSize property */ }
        <label style={{ fontSize: `${slider}px` }}>Example range</label>

        {/* Supply slider state via value prop rather than defaultValue */ }
        <input 
          type="range" 
          className="custom-range" 
          id="customRange1"
          min="10" 
          max="30"
          value={slider}
          onChange={handleChange}
        /> 
    </div>
  );
}

请参阅此链接，以获取讨论value指定了prop的表单/输入元素（称为“受控组件”）的相关文档。

Answer 2

你想念这里的单位

<label style={ { fontSize: `${slider}px` } }>Example range</label>

演示版