React中输入时如何动态调整Input宽度？onChange样式设置无效求助

当然可以实现输入时动态调整Input宽度，让%始终显示在末尾。你之前的代码不生效，主要是因为React受控组件的特性——直接修改DOM元素的style会被React的状态渲染覆盖，应该通过状态来驱动样式变化。下面提供两种可行方案：

方案一：基于字符长度快速实现 #

这种方法适合使用等宽字体的场景，通过计算输入字符数（包含末尾的%）来设置宽度：

import { useState } from 'react';

function DynamicPercentInput() {
  const [numValue, setNumValue] = useState('');

  const handleChange = (e) => {
    // 只保留数字输入，避免非数字字符干扰宽度计算
    const pureNum = e.target.value.replace(/[^0-9]/g, '');
    setNumValue(pureNum);
  };

  // 宽度 = 数字长度 + 1（%的宽度），初始状态仅显示%，宽度为1ch
  const inputWidth = `${numValue.length + 1}ch`;

  return (
    <input
      type="text"
      value={`${numValue}%`}
      onChange={handleChange}
      style={{
        width: inputWidth,
        minWidth: '1ch',
        boxSizing: 'border-box',
        // 建议使用等宽字体，确保ch单位的准确性
        fontFamily: 'monospace'
      }}
    />
  );
}

方案二：镜像元素精准计算宽度 #

如果使用非等宽字体，ch单位的宽度匹配会有误差，这时可以用隐藏的镜像元素模拟输入框内容，获取真实宽度后同步给输入框：

import { useState, useRef, useEffect } from 'react';

function DynamicPercentInput() {
  const [numValue, setNumValue] = useState('');
  const inputRef = useRef(null);
  const mirrorRef = useRef(null);

  const handleChange = (e) => {
    const pureNum = e.target.value.replace(/[^0-9]/g, '');
    setNumValue(pureNum);
  };

  useEffect(() => {
    if (!inputRef.current || !mirrorRef.current) return;
    
    // 同步镜像元素和输入框的样式，确保宽度计算准确
    const inputStyle = getComputedStyle(inputRef.current);
    mirrorRef.current.style.padding = inputStyle.padding;
    mirrorRef.current.style.fontSize = inputStyle.fontSize;
    mirrorRef.current.style.fontFamily = inputStyle.fontFamily;
    mirrorRef.current.style.border = inputStyle.border;

    // 将镜像元素的宽度设置给输入框
    inputRef.current.style.width = `${mirrorRef.current.offsetWidth}px`;
  }, [numValue]);

  return (
    <div style={{ position: 'relative' }}>
      <input
        ref={inputRef}
        type="text"
        value={`${numValue}%`}
        onChange={handleChange}
        style={{
          minWidth: '1ch',
          boxSizing: 'border-box'
        }}
      />
      {/* 隐藏的镜像元素，用于计算输入内容的真实宽度 */}
      <div
        ref={mirrorRef}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          visibility: 'hidden',
          whiteSpace: 'pre',
          height: 0
        }}
      >
        {`${numValue}%`}
      </div>
    </div>
  );
}

核心注意点 #

• 优先使用受控组件管理输入状态，避免直接操作DOM样式被React渲染覆盖
• 如果用字符长度计算，务必包含末尾%的占位长度
• 非等宽字体场景下，镜像元素法能保证宽度匹配的精准度

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