React 如何onChange事件中触发CSS样式

问题描述

有没有办法在React中随着我们输入而改变输入框宽度的样式？

我的初始输入框的宽度是1ch。我希望当我输入/聚焦时，随着字符的增长/缩小，输入框的宽度也能相应增加/减少，这样百分比符号将始终保持在尾部。

我的代码中用于样式的onChange事件是以下这一行：

e.target.style.width = e.target.value.length + 'ch'

但似乎根本不起作用。如何触发这个输入框的宽度？

解决方案

在React中，你可以像这个例子组件一样在输入时改变输入框的宽度样式。

import React, { useState } from 'react';

const InputComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        style={{ width: `${inputValue.length}ch` }}
      />
    </div>
  );
};

export default InputComponent;