Hướng dẫn dùng react-select/async JavaScript - sử dụng phản ứng-chọn/không đồng bộ JavaScript

Question

Xử lý các đầu vào có thể lựa chọn trên các trang web là một điều mà hầu hết các nhà phát triển không thích tham gia. Một số trang web người dùng yêu cầu người dùng chọn từ danh sách các tùy chọn áp dụng cho họ, có thể yêu cầu đa lựa chọn hoặc có thể yêu cầu người dùng tạo một mục nhập duy nhất vào trường. Khi xây dựng các thành phần đầu vào có thể lựa chọn phức tạp này, chúng ta có xu hướng sử dụng các thư viện thành phần. Trong trường hợp của tôi, tôi sử dụng phản ứng chọn.

Nội dung chính Show

Tạo một dự án mẫu
Phát lại phiên nguồn mở
Dữ liệu không đồng bộ tìm nạp
Sự kết luận

React-Select là một gói React để nhanh chóng tạo các thùng chứa đầu vào linh hoạt. Nó được phát triển như là một thay thế cho yếu tố React từ

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

6. Phần tử đó được sử dụng để tạo danh sách các mục thả xuống để người dùng chọn. React-Select đưa mọi thứ đi xa hơn một chút so với các tính năng được cung cấp bởi phần tử

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

6 bằng cách cung cấp các tính năng dễ dàng tùy chỉnh để tạo các tùy chọn thả xuống. Các tính năng được cung cấp bởi gói này bao gồm các trường đầu vào với các tính năng tự động hoàn thành, danh sách các tùy chọn có thể lựa chọn có thể được tùy chỉnh cho nhiều lựa chọn, các cuộc gọi không đồng bộ và tính năng để tạo các mục mới. React-chọn là đơn giản để sử dụng và có thể được tùy chỉnh để đáp ứng các yêu cầu khác nhau. Dưới đây là GIF hiển thị các tính năng chọn phản ứng:

Trong hướng dẫn này, chúng tôi sẽ xây dựng một thành phần đầu vào tùy chỉnh trong một dự án bằng cách sử dụng phản ứng. Với nó, chúng tôi sẽ chứng minh các tùy chọn chọn khác nhau như SingE, Multi-search và tìm kiếm có thể tạo trong đó người dùng có thể tạo các mục không tồn tại. Chúng tôi cũng sẽ chứng minh cách chúng tôi có thể sử dụng nguồn dữ liệu như API để điền vào các mục chọn.

Tạo một dự án mẫu

Đối với bài viết này, chúng tôi sẽ sử dụng khung React.js, Axios và phản ứng chọn. Chúng ta có thể cài đặt điều này thông qua CLI với các lệnh sau, thiết lập một thư mục dự án React có tên là

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

8 với sự phụ thuộc cần thiết.

npx create-react-app react-select
cd react-select
npm install axios react-select --save

Sau khi cài đặt hoàn tất, hãy mở thư mục dự án trong trình chỉnh sửa mã của bạn. Trong tệp

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

9, chúng tôi sẽ thêm nhập cho gói

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

8 và xác định một mảng các mục danh sách có thể chọn:

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

Để tạo kiểu tốt hơn ứng dụng, hãy thêm các dòng sau vào

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

1:

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

Để chạy ứng dụng, hãy nhập

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

2 trong CLI và mở trình duyệt của bạn trên URL

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

3. Ở đây, chúng tôi nhận được kết quả tương tự như hình ảnh dưới đây:

Ở trên, chúng tôi có trường

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

8 với việc thả xuống các mục danh sách. Chúng tôi cũng có thể lọc các mục danh sách bằng trường nhập. Thêm

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

5 vào các thuộc tính

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

6 để cho phép nhiều lựa chọn.

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

Khi điều này được thực hiện, chúng tôi có thể thêm nhiều tùy chọn từ danh sách bằng tính năng đa chọn.

Chúng tôi cũng có thể thêm một thông báo sẽ được hiển thị khi mục nhập của người dùng không khớp với các tùy chọn có sẵn bằng cách sử dụng thuộc tính

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

7:

noOptionsMessage={()=>"name not found"}

Để cho phép người dùng tạo một mục nhập mới thông qua trường nhập, hãy thêm các mục sau:

import Creatable from 'react-select/creatable';

Thay vì

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

6, chúng tôi sử dụng

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

9 thay thế: thay vào đó:

  <Creatable
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
  noOptionsMessage={()=>"name not found"}
/>

Bây giờ, có một tùy chọn để thêm các tên không tồn tại cho các tùy chọn:

Ngoài ra, đối với các chuỗi dài hơn như tên của các quốc gia, chúng ta có thể sử dụng một mẫu được ký hợp đồng trong thuộc tính

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

0 trong khi hiển thị tên đầy đủ của quốc gia với thuộc tính nhãn:

const selectableCountries = [
  { value: "USA", label: "United States of America" },
  { value: "JPN", label: "Japan" },
  { value: "ZAF", label: "South Africa" },
  { value: "CHN", label: "China" },
];

Sau đó, chúng tôi chuyển cái này cho thành phần

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

9 thay thế:

<Creatable
  placeholder="Choose your nationality"
  options={selectableCountries}
  isMulti
  noOptionsMessage={()=>"Country not found"}
/>

Trong trình duyệt, chúng tôi sẽ nhận được kết quả sau:

Ở đây, giá trị vẫn là các chữ viết tắt ba chữ cái, giúp sử dụng bên máy chủ dễ dàng hơn trong khi vẫn giúp người dùng biết họ chọn quốc gia nào bằng cách trình bày tên đầy đủ trong thuộc tính

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

2.

Phát lại phiên nguồn mở

OpenReplay là một bộ phát lại phiên, phần mở cho phép bạn xem người dùng làm gì trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí.

Dữ liệu không đồng bộ tìm nạp

Giả sử chúng ta đã chọn dữ liệu từ một danh sách các mục, được điền bởi một nguồn dữ liệu. Nguồn dữ liệu này có thể là cơ sở dữ liệu, CMS hoặc API. Dưới đây là một ví dụ về cách chúng ta có thể đạt được điều này bằng cách sử dụng API:

import { useEffect, useState } from "react";
import axios from "axios";
const url = "https://api.github.com/search/users?q=John&per_page=5";

function App() {
  const [options, setOptions] = useState([""]);

  useEffect(() => {
    const getData = async () => {
      const arr = [];
      await axios.get(url).then((res) => {
        let result = res.data.items;
        result.map((user) => {
          return arr.push({value: user.login, label: user.login});
        });
        setOptions(arr)
      });
    };
    getData();
  }, []);
}

Trong mã ở trên, chúng tôi đang tìm nạp năm tên người dùng tương tự như John John từ một danh sách người dùng trên GitHub. Sau đó, chúng tôi đã lưu trữ dữ liệu này ở trạng thái và chúng tôi có thể thêm dữ liệu này làm tùy chọn trong thành phần

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb(79, 79, 237);
  border-radius: 8px;
  margin-top: 5px;
}

6:

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

0

Thay vì hiển thị một danh sách dài các tên vô tận, chúng tôi sẽ thêm một nút vào

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

4. Khi nút này được nhấp, yêu cầu tìm nạp chạy và một bộ tên khác sẽ được thêm vào danh sách tùy chọn.

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

1

Ở đây, chúng tôi có một chức năng để thêm các tùy chọn mới. Chúng tôi cũng đã xác định một nút mà chúng tôi sẽ thêm dưới dạng thành phần vào

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

5.

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

2

Với nút tùy chỉnh này được thêm vào, chúng tôi có nút

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

6 ở cuối danh sách tùy chọn của chúng tôi, như được hiển thị trong hình ảnh bên dưới.

Vì chúng tôi đã có chức năng

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

7 trong hook

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

8 của mình, chúng tôi cần thêm một cuộc gọi lại để chạy lại yêu cầu tìm nạp và tìm nạp bộ tên tiếp theo. Chúng tôi sẽ sử dụng sửa đổi

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

9 để lấy thuộc tính trang để đạt được điều này:

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

3

Sau đó, chúng tôi tăng giá trị của trạng thái

noOptionsMessage={()=>"name not found"}

0 bằng nút bằng hàm

noOptionsMessage={()=>"name not found"}

1:

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

4

Cuối cùng, đối với khối

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

8, chúng tôi đặt cuộc gọi lại thành

noOptionsMessage={()=>"name not found"}

0 để bất cứ khi nào giá trị của

noOptionsMessage={()=>"name not found"}

0 thay đổi,

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

8 lại tái tạo và sẽ được thực hiện.

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

5

Với điều này, khi chúng tôi nhấp vào nút

<Select
  placeholder= "Select an individual"
  options={selectableOptions}
  isMulti
/>

6, chúng tôi sẽ nhận thêm năm tên người dùng được thêm vào danh sách các tùy chọn.

Sự kết luận

Trong hướng dẫn này, chúng tôi đã học được cách thêm thành phần nút tùy chỉnh vào thành phần

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App() {
  return (
    <div className="App">
      <Select
        className="input-cont"
        placeholder= "Select an individual"
        options={selectableOptions}
      />
    </div>
  );
}
export default App;

8 của chúng tôi và thực hiện dữ liệu không đồng bộ. Bạn có thể đưa nó đi xa hơn và tạo thành phần tùy chỉnh của riêng bạn mà bạn có thể sử dụng với phản ứng.

Mẹo từ trình soạn thảo: Nếu bạn chỉ quan tâm đến việc tìm nạp dữ liệu dễ dàng, hãy xem dữ liệu tìm nạp và cập nhật của chúng tôi với React-Trình tải và tìm nạp so với Axios: đó là thư viện tốt nhất để thực hiện các yêu cầu HTTP? bài viết.