小编Raj*_*ker的帖子

我想使用滑块更新元素的字体大小。滑动滑块时，值会更改，并且可以使用将其成功存储到状态中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;