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替换为value道具，并按如下所示更新<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属性（称为“受控组件”）的表单/输入元素

Answer 2

您想念这里的单位

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

Answer 3

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

在这里，您要为滑块分配 Number ，然后使用 string (console.log(typeof e.target.value))更新它，即您正在更改某种数据类型，这不是一个好习惯编码。因为它可能会影响您的代码，所以如果您在多个地方依赖它（滑块），则程序可能会中断，并且您永远不会发现此类错误，请遵循良好的编码习惯。

尝试使用setSlider(Number(e.target.value));代替setSlider(e.target.value);

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

Answer 4

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

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

4 个答案: