Hướng dẫn tạo mẫu textarea chỉnh kích thước tự động trong React Bootstrap 5

Chí Vỹ

Textarea là một box mục văn bản, chủ yếu tạo một phần tử quản lý biểu mẫu được dùng để thu thập text nhiều dòng trong HTML. Chiều cao của textarea vẫn ổn định sau khi đạt tới một mức độ nhất định. Tuy nhiên, bạn vẫn có thể khiến chiều cao của nó tự động thay đổi kích thước.

Cách tạo vùng text tự động chỉnh kích thước trong React.js

Bài viết sẽ hướng dẫn bạn cách tạo Textarea tự động chỉnh kích thước trong React. Ví dụ dùng một phần tử chức năng với các hook useState, useEffect và useRef để thêm auto-resize và auto-height vào phần tử Textarea UI.

Textarea tự động chỉnh kích thước trong React có thể chứa bất kỳ số lượng văn bản và chỉnh vừa khít chiều cao dựa trên kích thước text. Bài viết dùng hook useRef để truy cập thuộc tính DOM, dựa trên số lượng text, gọi chức năng tùy biến này để thiết lập trạng thái hoặc kích thước vùng text.

Mỗi lần, hook useEffect dẫn ra một thành phần bằng cách dùng cùng cơ chế tương tự, bạn sẽ thiết lập chiều cao vùng văn bản. Dưới đây là chi tiết quá trình tạo Textarea tự động chỉnh kích thước trong React.

Cài đặt app React mới

Bạn cần một app React mới để hiện cách xây dựng tính năng và chạy lệnh để tạo một app React mới.

Đảm bảo truy cập thư mục dự án sau khi cài đặt ứng dụng này.

npx create-react-app react-blog

cd react-blog

Thêm thư viện Bootstrap

Bắt đầu bằng cách cài đặt thư viện bootstrap. Gói này sẽ giảm đáng kể thời gian tạo kiểu các thành phần trong giao diện.

Đảm bảo chạy lệnh được cung cấp sau:

npm install bootstrap

Tạo thành phần mới

Đi sâu vào dự án React, tại đây, bạn cần tạo thư mục components và đảm bảo tạo file Home.js với code được cung cấp.

nhập React từ 'react'
function Home() {
  return (
    <div></div>
  )
}
export default Home

Xây dựng textarea tự động chỉnh kích thước

Để hình thành textarea tự động chỉnh kích thước, tạo file components/Home.js, sau đó nhập các hook và hàm tùy biến như bên dưới:

import React from "react";
const Home = () => {
  const textRef = React.useRef();
  const [value, setValue] = React.useState();
  const onChnage = (event) => {
    setValue(event.target.value);
  };
  React.useEffect(() => {
    if (textRef && textRef.current) {
      textRef.current.style.height = "0px";
      const taHeight = textRef.current.scrollHeight;
      textRef.current.style.height = taHeight + "px";
    }
  }, [value]);
  return (
    <div>
      <h2>React Textarea Auto Size Example</h2>
      <textarea className="form-control" ref={textRef} onChange={onChnage}>
        {value}
      </textarea>
    </div>
  );
};
export default Home;

Cập nhật phần tử chung

Tới file App.js. Đây là phần tử chính cho hoạt động của app React. Bạn phải đăng ký thành phần được tạo cho vùng chỉnh kích thước tự động.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Home from "./components/Home";
function App() {
  return (
    <div className="container mt-3">
      <Home />
    </div>
  );
}
export default App;