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

Question

I'm trying to make a dynamically adjust height to my textarea. I saw here some solution but it's now work for me.. my code:

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;   
}

I want that by press "Enter" the rextarea will be one more line (and if it is possible to make it bigger to the top it will be great - just like in whatsapp computer app.

Answer 1

You have to use controlled components and also put this value in state:

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

The updated value will not be passed to the textbox until the contents and the rowCount are stored in state. A quick example would be:

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>
  );
}

Live Snippet

 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>

Preview

Check out demo: CodeSandbox