Tạo danh sách thả xuống đẹp mắt với React Select
Đầu vào chọn là một thành phần ứng dụng web hữu ích cho phép bạn chọn một giá trị từ nhiều tùy chọn mà không chiếm nhiều dung lượng. Nhưng kiểu dáng mặc định có thể buồn tẻ và xung đột với phần còn lại của thiết kế.
React Select cung cấp một cách tiếp cận có thể thích ứng và được thiết kế riêng để nâng cao cả sự hấp dẫn trực quan và hiệu suất của các phần tử đầu vào thả xuống, cung cấp cho các nhà phát triển các công cụ linh hoạt để nâng cao thiết kế giao diện người dùng.
Cài đặt React Chọn
Việc kết hợp React với nhiều thư viện hoặc công nghệ bổ sung khác nhau có thể hợp lý hóa quy trình phát triển bằng cách cung cấp khả năng tích hợp liền mạch giữa các thành phần này. Ví dụ về các tích hợp như vậy bao gồm React Select, React Redux, trong số những tích hợp khác, cung cấp một cách tiếp cận thống nhất để quản lý chức năng phức tạp trong các ứng dụng.
Để bắt đầu sử dụng React Select trong một dự án, người ta phải kết hợp nó dưới dạng cài đặt thông qua nỗ lực hiện có của họ. Để thực hiện được điều này thông qua trình quản lý gói npm, hãy điều hướng đến thư mục gốc của dự án và thực hiện lệnh tiếp theo từ thiết bị đầu cuối:
npm i --save react-select
Quá trình nói trên sẽ tạo điều kiện thuận lợi cho việc tích hợp thư viện được chỉ định trong ứng dụng React của bạn, từ đó cho phép sử dụng nó.
Tạo đầu vào chọn với React Select
Khi thư viện đã được thiết lập, việc sử dụng nó sẽ cho phép tạo ra các phần tử đầu vào chọn lọc thông qua việc sử dụng thành phần Chọn linh hoạt và có thể định cấu hình. Thành phần này tạo điều kiện cho người dùng lựa chọn từ một loạt các lựa chọn có sẵn.
Mã được cung cấp thể hiện việc triển khai thành phần React Native Select , cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách. Phần tử được sử dụng để nhập văn bản làm đầu vào nhằm lọc kết quả dựa trên từ khóa do người dùng nhập. Khi nhấn nút “Enter”, dữ liệu đã lọc sẽ được hiển thị trong menu thả xuống bên dưới thanh tìm kiếm để người dùng lựa chọn.
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options}/>
</div>
)
}
export default App
Trong hình minh họa này, chúng tôi nhập thành phần’Chọn’từ thư viện’Reac-select’. Sau đó, chúng tôi tạo một mảng tùy chọn chứa ba đối tượng, trong đó mỗi đối tượng sở hữu hai thuộc tính-thuộc tính’value’và thuộc tính’label’. Thuộc tính’giá trị’biểu thị dữ liệu sẽ được truyền đến máy chủ khi gửi biểu mẫu, trong khi thuộc tính’nhãn’biểu thị văn bản được hiển thị trong danh sách thả xuống.
Khi hiển thị thành phần Chọn, điều cần thiết là cung cấp danh sách các tùy chọn làm đầu vào bằng cách sử dụng thuộc tính “options”. Điều này cho phép thành phần hoạt động hiệu quả và hiển thị các lựa chọn lựa chọn mong muốn cho người dùng.
Khối mã này cho phép sử dụng thư viện React Select để tạo menu chọn có giao diện sau:
Tùy chỉnh đầu vào chọn
React Select cung cấp vô số tùy chọn để điều chỉnh giao diện và chức năng của các thành phần được chọn thông qua việc sử dụng các lớp CSS hoặc bằng cách sử dụng các kỹ thuật tạo kiểu nội tuyến phù hợp nhất với sở thích thiết kế của một người.
Tùy chỉnh với các lớp CSS
Thư viện React Select cung cấp thuộc tính className cho thành phần Select , cho phép người dùng truyền các Cascading Style Sheets (CSS) được cá nhân hóa cho lựa chọn các thành phần đã chọn của họ.
Ví dụ:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default App
Đoạn mã được cung cấp minh họa một phiên bản của cú pháp ngôn ngữ lập trình JavaScript. Nó liên quan đến các phần tử HTML và các thuộc tính tương ứng của chúng. Cụ thể, nó minh họa việc sử dụng thuộc tính className trong phần tử , cho phép ứng dụng các lớp CSS tùy chỉnh thông qua việc cung cấp chuỗi định danh duy nhất làm giá trị của nó. Cách thực hành này cho phép tùy chỉnh kiểu dáng trên hình thức trực quan của thành phần được kết xuất.
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Sau khi thiết lập các kiểu này, giao diện của đầu vào bạn chọn sẽ như sau:
Tùy chỉnh với kiểu nội tuyến
Ngoài ra, người ta có thể triển khai các kiểu nội tuyến bằng cách kết hợp chúng trong một đối tượng tạo kiểu, sau đó được chuyển dưới dạng tham số cho thuộc tính “kiểu” được liên kết với thành phần “Chọn”. Cách tiếp cận như vậy cho phép linh hoạt và chính xác hơn khi kiểm soát hình thức bên ngoài của các thành phần cụ thể.
Đây là một ví dụ:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customStyles = {
control: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#e2e2e2",
}),
option: (baseStyles, state) => ({
...baseStyles,
backgroundColor: state.isFocused ? "#e2e2e2" : "",
color: state.isFocused ? "#333333" : "#FFFFFF",
}),
menu: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#333333",
}),
}
return (
<div>
<Select options={options} styles={customStyles}/>
</div>
)
}
export default App
Đối tượng customStyles trong TypeScript đóng vai trò là kho lưu trữ các thuộc tính kiểu dáng được thiết kế riêng cho các thành phần khác nhau trong thư viện React Select. Các kiểu này được gói gọn trong các hàm chấp nhận hai tham số-baseStyles , biểu thị một tập hợp các thuộc tính mặc định có thể kế thừa và trạng thái , biểu thị cấu hình hoặc trạng thái hiện tại của phần tử được đề cập. Bằng cách sử dụng phương pháp này, các nhà phát triển có thể dễ dàng sửa đổi và áp dụng các đặc điểm hình ảnh riêng biệt cho các phần tử Điều khiển, Tùy chọn và Menu của thành phần Chọn một cách dễ dàng.
Tham số baseStyles biểu thị các thuộc tính thiết kế tiêu chuẩn do React Select cung cấp, trong khi tham số state biểu thị tình trạng hiện tại của thành phần. Ở đây, cả hai đều sử dụng toán tử trải rộng song song để hợp nhất các tính năng tạo kiểu cơ bản đã nói ở trên cùng với các cấu hình trực quan bổ sung cho mọi phần của giao diện.
Sau khi thực hiện những điều chỉnh về phong cách này, trường nhập đã chọn của bạn sẽ hiển thị bản trình bày giống như ví dụ được cung cấp bên dưới:
Thêm chức năng vào đầu vào chọn lọc
React Select cung cấp một loạt các khả năng làm tăng thêm tiện ích của các phần tử được chọn. Trong số này có khả năng triển khai nhiều chức năng lựa chọn và tìm kiếm cũng như tạo các menu thả xuống phù hợp.
Chức năng chọn nhiều mục
Để cấp cho người dùng khả năng chọn nhiều lựa chọn trong danh sách thả xuống, bạn có thể cung cấp thuộc tính “isMulti” làm tham số cho phần tử Chọn. Bằng cách đó, nó sẽ cho phép các cá nhân chọn nhiều hơn một tùy chọn từ các lựa chọn thay thế được hiển thị.
Ví dụ:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti/>
</div>
)
}
export default App
Hình minh họa này thể hiện cách triển khai thuộc tính “isMulti”, cho phép khả năng chọn nhiều đối với các thành phần đầu vào được chọn.
Chức năng tìm kiếm
Thư viện React Select cung cấp tính năng tìm kiếm thuận tiện vốn đã được tích hợp trong thành phần Select của nó. Khi mở menu thả xuống, hành vi mặc định của thành phần Chọn sẽ hiển thị đầu vào tìm kiếm để người dùng có thể truy cập ngay lập tức. Sau đó, người dùng có thể nhập truy vấn mong muốn thông qua đầu vào tìm kiếm để thu hẹp các tùy chọn được hiển thị một cách hiệu quả dựa trên tiêu chí cụ thể của họ.
Để cấp khả năng tìm kiếm cho thành phần Chọn, hãy cung cấp thuộc tính “isSearchable” với giá trị Boolean. Hành động này tương đương với việc cung cấp thuộc tính “isMulti”, thuộc tính này cũng yêu cầu đầu vào boolean.
Hãy xem đoạn mã sau đây minh họa cách triển khai thuộc tính isSearchable để kích hoạt chức năng tìm kiếm trong thành phần React:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable/>
</div>
)
}
export default App
Khối mã, khi được hiển thị, sẽ tạo ra một phần tử HTML thuộc loại “chọn” có khả năng thực hiện tìm kiếm thông qua menu thả xuống của nó. Sự xuất hiện và hành vi của phần tử nói trên sẽ giống với cấu trúc sau:
Tạo các thành phần thả xuống tùy chỉnh
React Select cung cấp một cách tiếp cận linh hoạt để tạo các menu thả xuống phù hợp thông qua thuộc tính thành phần của nó, cho phép người dùng sửa đổi các tùy chọn tiêu chuẩn do React Select cung cấp với các kiểu và chức năng được cá nhân hóa phù hợp với sở thích cá nhân.
Ví dụ:
import React from "react"
import Select, { components } from "react-select"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default App
Mã được cung cấp minh họa quá trình tạo các thành phần được thiết kế riêng cho menu thả xuống bằng cách sử dụng thuộc tính “thành phần” của phần tử “Chọn”. Để đạt được điều này, nó nhập đối tượng “thành phần”, đóng vai trò là sự tích lũy của các thành phần đúc sẵn nhằm tạo điều kiện cho việc cá nhân hóa các khía cạnh trực quan và chức năng khác nhau liên quan đến menu thả xuống.
CustomOption và CustomDropdownIndicator. Thành phần trước chấp nhận một đối số ở dạng một đối tượng chứa một số thuộc tính thường được cung cấp bởi React Select, chẳng hạn như InnerProps và nhãn.
Thành phần CustomDropdownThedicator chấp nhận các tham số ở dạng prop(s). Nó chịu trách nhiệm hiển thị một chỉ báo thả xuống tùy chỉnh có mũi tên chỉ xuống mang tính biểu tượng. Để đạt được điều này, nó tận dụng một đối tượng customComponents để thiết lập sự tương ứng giữa các thành phần CustomOption và CustomDropdownThedicator bằng cách ánh xạ chúng tới các khóa Tùy chọn và DropdownIndicator tương ứng của chúng.
Cuối cùng, tập lệnh này chuyển đối tượng customComponents sang thuộc tính thành phần của phần tử Select. Do đó, nó tạo ra một đầu vào chọn lọc có các thành phần tùy chỉnh như mô tả bên dưới:
Các thành phần tiêu chuẩn có thể mạnh mẽ và hấp dẫn hơn
React Select là một công cụ nâng cao cho phép các nhà phát triển xây dựng các đầu vào chọn lọc được thiết kế tốt và hấp dẫn trực quan trong khuôn khổ React. Thư viện cung cấp sự linh hoạt trong việc điều chỉnh giao diện của các thành phần đầu vào này và thêm các chức năng để đáp ứng các yêu cầu cụ thể. Bằng cách sử dụng React Select, người ta có thể cải thiện đáng kể sự hấp dẫn trực quan và tương tác tổng thể của người dùng với các ứng dụng React của họ.