У меня есть некоторые проблемы, чтобы получить текстовую карьеру для автоматического расширения из одной строки.
это работает, когда у меня есть 3 или более строк и один ряд, но два сначала выглядят странно. < /p>
Не могу найти хороший способ узнать, когда текст так обрезается. Поскольку длина ввода будет динамической. < /P>
Я видел решения, которые работают здесь на Stackoverflow, но я должен иметь общую высоту входа, чтобы начать с 40 пикселей; И решения, которые я видел, не могут справиться с этим случаем.
< /p>
(не возражайте против черного графика для Textarea, по какой-то причине кода и ящик показывает это, но не для меня.) < /p>
У меня есть CodeSandbox, которая показывает проблему:
https://codesandbox.io/s/affectionate-y ... js:241-296
Любой имел аналогичную проблему или мог указать мне в правильном направлении?import React, { useState, useEffect } from "react";
import styled from "styled-components";
const InputWrapper = styled.div`
display: inline-flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: 8px 16px;
border-radius: 6px;
background-color: white;
border: 1px solid black;
`;
const StyledTextArea = styled.textarea`
width: 100%;
max-height: 300px;
font-size: 16px;
background-color: white;
line-height: 18px;
resize: none;
transition: all 300ms;
border: none;
overflow: hidden;
`;
const TextArea = ({ value, placeholder, handleEvent }) => {
const [textAreaRef, setTextAreaRef] = useState(React.createRef());
const updateHeight = () => {
const updatedTextArea = { ...textAreaRef };
updatedTextArea.current.style.height = "";
updatedTextArea.current.style.height = `${updatedTextArea.current.scrollHeight}px`;
setTextAreaRef(updatedTextArea);
};
useEffect(() => updateHeight(), [value]);
return (
);
};
export default TextArea;
Подробнее здесь: https://stackoverflow.com/questions/747 ... on-one-row
