包装和高度增加输入 React CSS

Question

我尝试制作一个输入组件，其中文本换行并且输入的高度在每一行出现时都会增加。我的意思是在桌面 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行文字后，滚动条应该会出现。我该怎么做？

Answer 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>