为什么 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，并按如下所示style更新<label>元素，则组件将按预期工作：

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道具的表单/输入元素(称为"受控组件"(的相关文档，请参阅此链接

Answer 2

你错过了这里的单元，

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

演示

Answer 3

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

在这里，您将数字分配给滑块，然后使用字符串(console.log(typeof e.target.value))更新它，即您正在更改某些内容的数据类型，这不是编码的好习惯。因为它可能会影响你的代码，如果你在多个地方依赖它(滑块(，你的程序可能会中断，你永远不会发现这样的错误，遵循良好的编码实践。

尝试使用setSlider(Number(e.target.value));而不是setSlider(e.target.value);

https://codesandbox.io/s/pedantic-black-x6uzx

Answer 4

示例范围 如果您提到没有单位，它将采用默认字体大小。在您的情况下，字体大小正在滑块中更新，但由于缺少单位而无法使用。