如何在处理Web项目中使用ReactSelect包？

三四年前在处理 Web 项目时，选择元素曾经是最容易构建的事情之一。然而，如今，构建选择元素还有很多，尤其是当 UI 和 UX 是高优先级时。

例如，必须考虑对焦、从远程源获取数据、设置选择元素样式等功能。在处理 React 项目时，您可能希望多元宇宙中的某个地方存在可重用的组件。

幸运的是，Jed Watson 开始了一个由他的公司 Thinkmill 和 Atlassian 资助的开源项目，名为 React Select。在本文中，我们将探讨怎么注册hotmail邮箱？如何创建Outlook电子邮箱帐户？ React Select v5 中包含的一些很棒的功能，然后通过一个简单的示例学习如何开始使用 React Select。您还可以查看我们在 React Select 上的视频教程。让我们开始吧！

先决条件

若要按照本教程进行操作，需要以下各项：

• 机器上安装的纱线或 npm

• 创建反应应用程序已安装的命令行界面工具

• 对 HTML、JavaScript ES6 和 CSS 有基本的了解

• 对 React 框架的基本了解

• 对命令行终端的基本了解

安装 React Select

有了这些要求，我们将首先将iPhone手机刷机报错4013怎么办？导致4013错误的原因是什么？ React Select 包添加到我们现有的 React 应用程序中。在本教程中，我们将使用 Create React App CLI 工具。

如果还没有现有项目，可以使用以下代码创建一个项目：

npx create-react-app my-app
# OR
yarn create react-app my-app

完成后，我们可以使用以下命令安装 React Select 包：

npm install react-select
# OR
yarn add react-select

现在，我们将看看如何在 React 应用程序中导入和使用 React Select 包。

React Select 的基本用法

要开始使用 React Select，我们只需要导入它的组件并添加一个包含选项及其相应标签的对象数组：Select

// App.js
​
import Select from "react-select";
​
const App = () => {
  const options = [
    { value: "blues", label: "Blues" },
    { value: "rock", label: "Rock" },
    { value: "jazz", label: "Jazz" },
    { value: "orchestra", label: "Orchestra" },
  ];
​
  return (
    <div>
      <Select options={options} />
    </div>
  );
};
​
export default App;

在上面的代码片段中，我们将选择选项作为音乐流派，这些选项作为道具传递到组件中。当我们运行这个应用程序时，我们应该看到一个从一端到另一端跨越屏幕的元素：select``select

在以下部分中，我们将了解如何设置组件样式以扩展其功能并使其更具视觉吸引力。但首先，我们将 Bootstrap 添加到我们的应用程序中，以帮助构建并防止我们的组件占用整个网页宽度。select``select

添加引导程序

我们可以在我们的项目中安装 Bootstrap，如下所示：

npm install bootstrap
# OR
yarn add boostrap

安装 Bootstrap 后，我们将利用其实用程序类来重组我们的应用程序：

//App.js
import Select from "react-select";
​
// Import Bootstarp CSS
import "bootstrap/dist/css/bootstrap.css";
​
const App = () => {
  const options = [
    { value: "blues", label: "Blues" },
    { value: "rock", label: "Rock" },
    { value: "jazz", label: "Jazz" },
    { value: "orchestra", label: "Orchestra" },
  ];
  return (
    <div className="container">
      <div className="mt-5 m-auto w-50">
        <Select options={options} />
      </div>
    </div>
  );
};
​
export default App;

上面的代码将为我们提供一个如下图所示的元素：select

使用和道具onChange``autofocus

从 React Select 组件获取值与使用传统 HTML 输入的方式相当;我们可以通过利用它的事件以及 React Hook 来实现，如下所示：onChange``useState

import { useState } from "react";
import Select from "react-select";
import "bootstrap/dist/css/bootstrap.css";
​
const App = () => {
  const options = [
    { value: "blues", label: "Blues" },
    { value: "rock", label: "Rock" },
    { value: "jazz", label: "Jazz" },
    { value: "orchestra", label: "Orchestra" },
  ];
​
  const [selected, setSelected] = useState(null);
​
  const handleChange = (selectedOption) => {
    setSelected(selectedOption);
    console.log(`Option selected:`, selectedOption);
  };
​
  return (
    <div className="container">
      <div className="mt-5 m-auto w-50">
        <Select options={options} onChange={handleChange} autoFocus={true} />
​
        <div className="mt-4">
          {selected && <>You've selected {selected.value}</>}
        </div>
      </div>
    </div>
  );
};
​
export default App;

在上面的代码中，我们向事件中添加了一个函数，以便每当用户更改组件中的选项时，我们的状态都会更新为包含所选选项值和标签的对象。handleChangeonChangeselect

因此，如果我们选择作为选项，我们的控制台将显示如下所示的内容：rock

Option selected: {value:"rock", label: "Rock"}

当我们想要操作从 React Select 组件获得的数据时，这很有用。我们还有 prop，它接受一个值并用于在页面加载时添加到组件中。要了解有关可供使用的道具的更多信息，您可以查看 React Select 的道具文档。autoFocusbooleanautoFocus``select

将自定义样式添加到 React Select 组件

React Select 是完全可定制的，允许我们为每个单元设置样式，例如、、、以及更多组件。我们可以通过传递一个包含每个单元的新首选样式的附加道具来实现这一点：controloptionsplaceholderselectstyles

在此过程中，我们还可以访问并选择为每个单元添加默认样式。我们还可以根据需要添加样式，这意味着我们指定选项在被选中或关注时应该具有的样式，等等。

若要尝试所有这些操作，请将以下代码粘贴到文件中：App.js

import Select from "react-select";
import "bootstrap/dist/css/bootstrap.css";
​
const App = () => {
  const options = [
    { value: "blues", label: "Blues" },
    { value: "rock", label: "Rock" },
    { value: "jazz", label: "Jazz" },
    { value: "orchestra", label: "Orchestra" },
  ];
  const customStyles = {
    option: (defaultStyles, state) => ({
      ...defaultStyles,
      color: state.isSelected ? "#212529" : "#fff",
      backgroundColor: state.isSelected ? "#a0a0a0" : "#212529",
    }),
​
    control: (defaultStyles) => ({
      ...defaultStyles,
      backgroundColor: "#212529",
      padding: "10px",
      border: "none",
      boxShadow: "none",
    }),
    singleValue: (defaultStyles) => ({ ...defaultStyles, color: "#fff" }),
  };
​
  return (
    <div className="container">
      <div className="mt-5 m-auto w-50 text-light">
        <Select options={options} styles={customStyles} />
      </div>
    </div>
  );
};
​
export default App;

在上面的代码中，我们修改了组件以将自定义样式添加到 select 、其选项通过 和当前选定的选项添加到 .我们进行了更改，以使组件具有暗模式外观。运行应用程序时，应具有类似于以下内容的输出：selectcontroloptionsingleValueselect

自定义组件

在样式和状态下，我们讨论了两个自定义组件，以及用于扩展样式的 。在本节中，我们将介绍另一个名为 .optioncontrolselect``Custom SingleValue

这个自定义组件执行我们的常规组件所做的事情，但我们将添加一些技巧。在我们的文件中，我们将使用以下代码从 React 和 React Select 导入 and 包：selectApp.jsReact``Select

import Select, { components } from 'react-select';
. . .

完成后，我们将有一个完成的下拉列表，如下所示：

在下面的代码块中，我们将自定义组件定义为扩展 React Select 包中基本组件的方法。在我们的类中，我们有几个道具和函数有助于上图所示的功能：SingleValue``App

import { useState } from "react";
import "bootstrap/dist/css/bootstrap.css";
import Select, { components } from "react-select";
​
const Control = ({ children, ...props }) => (
  <components.Control {...props}>
    Click to Select → {children}
  </components.Control>
);
​
const App = () => {
  const options = [
    { value: "blue", label: "Blue" },
    { value: "green", label: "Green" },
    { value: "orange", label: "Orange" },
    { value: "purple", label: "Purple" },
  ];
​
  const customStyles = {
    singleValue: (base) => ({
      ...base,
      padding: "5px 10px",
      borderRadius: 5,
      background: selected,
      color: "white",
      display: "flex",
      width: "fit-content",
    }),
  };
​
  const [selected, setSelected] = useState("");
  var handleChange = (selected) => {
    setSelected(selected.value);
  };
​
  return (
    <div className="container">
      <div className="mt-5 m-auto w-50">
        <Select
          onChange={handleChange}
          styles={customStyles}
          components={
  
  { Control }}
          options={options}
        />
      </div>
    </div>
  );
};
export default App;

多选

我们可以配置 React Select 以允许在单个组件中选择多个选项。这是通过在组件中包含属性来实现的：selectisMultiselect

import { useState } from "react";
import "bootstrap/dist/css/bootstrap.css";
import Select from "react-select";
​
function App() {
  const options = [
    { value: "blue", label: "Blue" },
    { value: "green", label: "Green" },
    { value: "orange", label: "Orange" },
    { value: "purple", label: "Purple" },
  ];
​
  const [selectedOption, setSelectedOption] = useState("");
​
  var handleChange = (selectedOption) => {
    console.log(selectedOption);
    setSelectedOption(selectedOption.value);
  };
​
  return (
    <div className="container">
      <div className="mt-5 m-auto w-50">
        <Select isMulti onChange={handleChange} options={options} />
      </div>
    </div>
  );
}
export default App;

当我们运行代码时，我们将得到以下输出：

将 React Select 与 SSR 结合使用

当您尝试将 React Select 组件与服务器端渲染 （SSR） 框架（如 Next.js）一起使用时，您可能会收到如下所示的引用错误：

ReferenceError: window is not defined

在组件完全挂载之前，浏览器的窗口对象在 SSR 中不可用。但是，React Select 依赖于浏览器对象才能运行。因为我们在挂载组件之前导入 React Select 库，所以会出现错误。window``reference is not defined

我们可以在 Next.js 中使用禁用选项的动态导入功能来修复此错误，如下所示：ssr

import dynamic from 'next/dynamic'
const Select = dynamic(() => import("react-select"), {
  ssr: false,
})

您还可以使用流行的软件包（如 react-no-ssr 软件包）在其他框架中实现。

异步和固定选项

在使用 React Select 组件时，还有其他一些概念很重要，其中之一是异步组件。从 API 或数据库查询请求值或选项时，此组件会派上用场。异步组件包括提供有用的道具，例如：select

• cacheOptions：缓存获取的选项

• defaultOptions：在加载远程选项之前设置默认选项

另一个可能派上用场的组件是固定选项组件，它可以拥有固定选项。

结论

在本文中，我们探讨了 React Select 组件的一些常见用例。我们还学习了如何开始使用 React Select 并扩展其一些预定义组件以满足我们的需求。

React Select 包中内置了大量功能，其中一些将满足您的需求，而其中一些您必须自定义以适应您的用例。