gpt4 book ai didi

reactjs - 为什么 ReactJS 中 DOM 不随着状态变化而更新?

转载 作者:行者123 更新时间:2023-12-03 13:23:39 25 4
gpt4 key购买 nike

我想使用 slider 更新元素的字体大小。当我滑动 slider 时,值会发生变化,我可以使用 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;

最佳答案

如果替换 defaultValuevalue Prop ,并更新您的 <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>
);
}

参见this link for relevant documentation讨论具有 value 的表单/输入元素指定的 prop(称为“受控组件”)

关于reactjs - 为什么 ReactJS 中 DOM 不随着状态变化而更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57688794/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com