通过反应调整文本区域高度

Question

我正在尝试对我的文本区域进行动态调整高度。 我在这里看到了一些解决方案，但它现在对我有用.. 我的代码：

const textArea = document.querySelector("textarea");
const textRowCount = textArea ? textArea.value.split("\n").length : 1;
const rows = textRowCount;

<textarea type="text" className="chat-box" rows={rows} style={{ height: "unset" }} />

css:

.chat-box{
    width: 70%;
    border-radius: 25px;
    border: solid 1px #b7b7b7;
    background-color: #eeeeee;
    margin-left: 2%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top:0.5%;
    resize: none;
    vertical-align: middle;
    overflow: hidden;
}
.chat-box:focus{
    outline-style: none;
}
.chat-box::-webkit-scrollbar {
    width: 2px;
}
.chat-box::-webkit-scrollbar-track {
    background: #eeeeee; 
    border-left: solid 1px #b6bcca;
    width: 10px;
}
.chat-box::-webkit-scrollbar-thumb {
    background: #7b808b;
    border-radius: 3px;   
}

我希望通过按“Enter”，rextarea 将多一行（如果可以将其扩大到顶部，那就太好了 - 就像在 whatsapp 计算机应用程序中一样。

Answer 1

您必须使用受控组件并将此值置于状态：

const textRowCount = textArea ? textArea.value.split("\n").length : 1;

在内容和rowCount 存储在状态之前，更新的值不会传递到文本框。一个简单的例子是：

function App() {
  const [value, setValue] = useState("");
  const rows = value.split("\n").length;
  return (
    <div className="App">
      <textarea
        value={value}
        rows={rows}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

实时片段

textarea {resize: none; width: 500px;}

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
function App() {
  const [value, setValue] = React.useState("");
  const rows = value.split("\n").length;
  return (
    <div className="App">
      <textarea
        value={value}
        rows={rows}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
</script>

预览

查看演示：CodeSandbox