包装和高度增加输入 React CSS

Posted 2023-03-05

【中文标题】包装和高度增加输入 React CSS

【英文标题】：Wrapping and height increasing input React CSS

【发布时间】：2021-12-02 08:46:09

【问题描述】：

我尝试制作一个输入组件，其中文本换行并且输入的高度在每一行出现时都会增加。我的意思是在桌面 facebook 上。当你点击某人，打开消息框并在输入中写一些东西时，输入每增加一个新的文本行就会变大。

我正在使用 textarea： <Input />

const Input = styled.textarea`
  border: 0;
  outline: none;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  width: 100%;
  overflow-wrap: break-word;
  height: 24px;
`;

输入5行文字后，滚动条应该会出现。我该怎么做？

【问题讨论】：

这对您有帮助吗？ ***.com/questions/8580991/…

不是真的，因为高度不会每新行增加一次

【参考方案1】：

如果它不必是文本区域，contenteditable 属性可以做到这一点 - 将其添加到 <div> 并设置滚动条出现的最大高度：

.demo 
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;

<div class="demo" contenteditable></div>

如果它必须是文本区域，那么您将不得不使用脚本来调整它的大小 - 这里列出了一些好的方法：CSS Tricks: Auto growing inputs and textareas

edit 这是一个 react 演示，使用带有占位符的 contentEditable 属性（React jsx 使用 camelCase）。占位符是使用伪元素添加的：

const ContentEditable = ( placeholder ) => (
  <div class="demo" contentEditable="true" placeholder=placeholder></div>
);

ReactDOM.render(
  <ContentEditable placeholder="Type something..." />, document.getElementById("react")
);

.demo 
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;


[contenteditable=true]:empty:before 
  content: attr(placeholder);
  color: #555;
  pointer-events: none;
  display: block;

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

contenteditable 方法很好，但是如何添加这个属性到 react 组件呢？我看到了它的库react-contenteditable，但是这个组件没有占位符属性。

对不起，我应该包含一个反应示例 - 用一个有占位符的反应演示更新了我的答案