当文本超过文本方面的高度尾风CSS（黛西UI）时，可以调整textarea的大小

Question

IM试图使用尾风CSS在React应用程序中调整TextArea的大小，但是，当我启用调整大小时，当文本超过文本方面的高度时，我将无法再调整TextAarea的大小。

事情的屏幕截图

1. 以下是文本超过高度之前

文本超过高度

2. 之前

发生的 a href =“ https://i.sstatic.net/ffqee.png” rel =“ nofollow noreferrer”>文本超过高度之后

下面是为textarea创建的组件

<div className='form-control w-full'>
  <label className='label'>
    <span className='label-text text-primary'>{title}</span>
  </label>
  <textarea
    placeholder={placeholder}
    className={`textarea w-full resize-y ${
      value !== text ? 'bg-green-100' : 'bg-white'
    }`}
    value={text}
    onChange={(e) => {
      setText(e.target.value);
      debounced(e.target.value);
    }}
  />
</div>

此textarea组件包裹在以下代码中

<div className="flex flex-row flex-wrap">
  {descriptions.map((field: CollapsibleInputField, i: number) => (
    <div
      key={i}
      className={
        field.placeholder === "English" ? "w-full pr-2" : "w-1/2 pr-2"
      }
    >
      <TextAreaContainer
        id={field.id}
        value={field.data}
        placeholder={field.placeholder}
        title={field.title}
      />
    </div>
  ))}
</div>

我在做什么错？

Answer 1

您正在尝试使用该调整大小来使文本动态根据文本进入其中。但是，您需要使用REF观察元素，并增加Textarea动态的高度。

这可以解决问题。

const ref = useRef<HTMLTextAreaElement>(null);

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = "auto";
    ref.current.style.height = `${e.target.scrollHeight - 16}px`;
  }
};

return (
  <div className="App">
    <section>
      <textarea
        ref={ref}
        rows={1}
        placeholder="Enter text here..."
        onInput={handleInput}
      />
    </section>
  </div>
);