Bộ phận CreatePost
Bây giờ chúng ta sẽ thực thi một form để cho phép việc tạo các posts mới. Ở đây, chúng ta cung cấp các
trường cho author và title và một phần tử <textarea> cho các nội dung của blog post.
Hãy thực thi bộ phận CreatePost bây giờ:
1. Tạo một src/components/CreatePost.jsx file mới.
2. Định nghĩa bộ phận sau, cái chứa một form để nhập title, author và các contents của một blog post:
Trong khối code trên, chúng ta đã định nghĩa một onSubmit handler và đã gọi e.preventDefault() trên
event object để tránh một làm mới trang khi form được đệ trình.
3. Hãy test bộ phận ra bằng cách thay thế src/App.jsx file với các nội dung sau:
import { CreatePost } from ‘./components/CreatePost.jsx’
export function App() {return <CreatePost />
}
Như bạn có thể thấy, bộ phận CreatePost duyệt tốt. Chúng ta bây giờ có thể di chuyển tới các bộ phận
PostFilter và PostSorting.
Tip
Nếu bạn muốn test ra nhiều bộ phận một lúc và giữ các tests quanh sau này, hay xây dựng một hướng dẫn
style cho thư viện bộ phận của bản thân bạn, bạn nên nhìn vào Storybook (https://storybook.js.org)
, cái là một công cụ hữu dụng để xây dựng, test và hướng dẫn tài liệu các bộ phận UI trong biệt lập.