如何在React中通过输入框设置innerWidth的大小？

window.innerWidth是只读属性，没法直接修改，我们换个思路——用状态来管理字号计算时使用的宽度值，既支持通过输入框手动设置，也保留窗口resize时的自动更新逻辑。

修改后的完整代码如下：

React 代码 #

const { StrictMode, useEffect, useState } = React;
const { createRoot } = ReactDOM;

function InputSize() {
  const [fontSize, setFontSize] = useState(6);
  const [min, setMin] = useState(24);
  const [max, setMax] = useState(45);
  const [calculationWidth, setCalculationWidth] = useState(window.innerWidth);

  useEffect(() => {
    function adjustFontSize() {
      // 使用受控的calculationWidth进行字号计算
      const newFontSize = Math.max(
        Number(min),
        Math.min(Number(max), Math.floor(calculationWidth / 100) + Number(min))
      );
      document.body.style.fontSize = `${newFontSize}px`;
      setFontSize(newFontSize);
    }

    function handleResize() {
      // 窗口resize时更新受控宽度为真实窗口宽度
      setCalculationWidth(window.innerWidth);
    }

    adjustFontSize();
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, [min, max, calculationWidth]); // 依赖添加calculationWidth，确保宽度变化时重新计算

  function setCustomWidth(e) {
    const newWidth = Number(e.target.value);
    if (!isNaN(newWidth) && newWidth > 0) {
      setCalculationWidth(newWidth);
      // 可选：如果需要同步修改body可视化宽度，保留这行
      document.body.style.width = `${newWidth}px`;
    }
  }

  return (
    <div>
      <input 
        type="number" 
        placeholder="最小字号" 
        value={min} 
        onChange={(e) => setMin(e.target.value)} 
      />
      <input 
        type="number" 
        placeholder="最大字号" 
        value={max} 
        onChange={(e) => setMax(e.target.value)} 
      />
      <input 
        type="number" 
        placeholder="设置计算宽度" 
        value={calculationWidth} 
        onChange={setCustomWidth} 
      />
      <p>当前计算宽度: {calculationWidth}px</p>
      <p style={{ fontSize: `${fontSize}px` }}>Sample text with dynamic font size.</p>
    </div>
  );
}

function App() {
  return <InputSize />
}

const root = createRoot(document.getElementById("root"));
root.render(<StrictMode><App /></StrictMode>);

HTML 代码 #

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

关键修改说明： #

• 新增calculationWidth状态，专门存储字号计算时使用的宽度值，初始值为真实窗口宽度
• 调整adjustFontSize函数，用calculationWidth替代window.innerWidth做计算，实现宽度的受控
• 拆分resize事件处理逻辑，handleResize只负责更新受控宽度，字号计算由useEffect依赖变化自动触发
• 给输入框处理函数添加有效性校验，避免非数字或负数输入导致计算错误
• 在useEffect依赖数组中加入calculationWidth，确保宽度变化时自动重新计算字号

这样既实现了输入框自定义宽度计算字号的需求，也保留了窗口resize时的自动响应功能。

内容的提问来源于stack exchange，提问作者talha