# @contentstack/react-select 中文文档

规范地址：https://npmcn.com/package/%40contentstack/react-select/

版本：3\.2\.10
npm 元数据更新时间：2026-05-12T09:46:47.968Z
中文译文更新时间：2026-11-10T16:54:53.918Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40contentstack/react-select
原文对照：https://npmcn.com/package/%40contentstack/react-select/?lang=original
项目主页：https://github.com/contentstack/venus-react19-forks#readme
源码仓库：https://github.com/contentstack/venus-react19-forks

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.2 MB，118 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：7 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0
- 首次发布：2025-04-23T10:51:59.988Z
- 最新版本发布：2026-05-12T09:46:47.830Z
- 近 30 天下载量：7737（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 5 个）

## 中文简介

用于 ReactJS 的选中控件

## 安装

```sh
npm install @contentstack/react-select
```

也可以使用：`pnpm add @contentstack/react-select`、`yarn add @contentstack/react-select`、`bun add @contentstack/react-select`

## README

[![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select) [![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=shield)](https://circleci.com/gh/JedWatson/react-select/tree/master) [![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)

# 反应选择

选择控件 [反应](https://reactjs.com/)。最初用于 [键通JS](http://www.keystonejs.com/)。 。 。 .

见 [反应- select.com](https://www.react-select.com/) 现场演示和综合文件.

看我们的 [升级指南](https://github.com/JedWatson/react-select/issues/3585) 关于如何从v2升级到v3的细分.

反应选择由 [智囊团](https://www.thinkmill.com.au/) 财务报告和审定财务报表 [阿特拉斯语](https://atlaskit.atlassian.com/)它代表了一种全新的方法来开发强大的React.js组件 _只是工作时_ 出盒子, 同时也是极其定制的.

特征包括:

-   灵活处理数据的方法,具有自定义功能
-   广泛设计 API [情绪](https://emotion.sh/)
-   用于完全控制UI行为的注射 API
-   可控状态道具和模块架构
-   长期要求的功能,如选项组、门户支持、动画等等

如果你对背景感兴趣,看杰德的 [在反应选择上进行交谈](https://youtu.be/Eb2wy-HNGMo) 在2018年3月的ReactNYC.

看我们的 [升级指南](https://react-select.com/upgrade-guide) 关于如何从v1升级到v2的分解.

将继续提供以前的文件和实例 [v1. 反应选择.com](https://v1.react-select.com/)。 。 。 .

# 安装和使用

使用反应选择的最简单方法是从npm安装,并用Webpack将它建入你的应用程序.

```
yarn add react-select
```

那就用在你的应用上:

```js
import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}
```

## 道具

您可能想要指定的常见道具包括:

-   `autoFocus` - 当控制器挂起时集中控制器
-   `className` - 在控件上应用一个类别Name
-   `classNamePrefix` - 对带有给定前缀的内在元素应用类名
-   `isDisabled` - 禁用控制器
-   `isMulti` - 允许用户选择多个值
-   `isSearchable` - 允许用户搜索匹配选项
-   `name` - 用此名称生成 HTML 输入, 包含当前值
-   `onChange` - 订阅更改事件
-   `options` - 指定用户可以从中选择的选项
-   `placeholder` - 在未选择选项时更改显示的文本
-   `value` - 控制当前值

见 [道具文档](https://www.react-select.com/props) 用于完整文档的道具反应-选择支持.

## 可控道具

您可以通过提供以下道具的值来控制它们. 否则,反应选择会为你管理它们.

-   `value` 编号 : `onChange` - 指定控件的当前值
-   `menuIsOpen` 编号 : `onMenuOpen` 编号 : `onMenuClose` - 控制菜单是否打开
-   `inputValue` 编号 : `onInputChange` - 控制搜索输入值( 更改此选项将更新可用的选项)

如果你不提供这些道具,你可以设定他们控制的状态的初始值:

-   `defaultValue` - 设定控件的初始值
-   `defaultMenuIsOpen` - 设置菜单的初始开放值
-   `defaultInputValue` - 设置搜索输入的初始值

## 方法

React-select 曝光了两种公开方法:

-   `focus()` - 集中控制程序
-   `blur()` - 模糊控制程序

## 自定义

请检查docs的更多信息:

-   [自定义样式](https://www.react-select.com/styles)
-   [使用自定义组件](https://www.react-select.com/components)
-   [使用内置动画组件](https://www.react-select.com/home#animated-components)
-   [创建同步选择](https://www.react-select.com/async)
-   [允许用户创建新选项](https://www.react-select.com/creatable)
-   [高级使用大小写](https://www.react-select.com/advanced)

# 谢谢

感谢为这个项目作出贡献的所有人。 已而野出出行.

如果你喜欢反应选择,你应该 [在推特上跟着我](https://twitter.com/jedwatson)

大声呼喊 [乔斯·麦基森](https://github.com/jossmac), (中文(简体) ), [查尔斯·李](https://github.com/gwyneplaine), (中文(简体) ), [本·康乐](https://github.com/Noviny), (中文(简体) ), [戴夫·克罗斯通](https://github.com/bruderstein), (中文(简体) ), [布莱恩·沃恩](https://github.com/bvaughn),以及阿特拉斯设计系统小组

## 许可证

麻省理工学院有执照 版权 (c) Jed Watson 2019.

## 常见问题

### @contentstack/react-select 是什么？

用于 ReactJS 的选中控件

### 如何安装 @contentstack/react-select？

在项目目录运行 npm install @contentstack/react-select，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @contentstack/react-select 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/contentstack\_\_react-select 是否存在。

### @contentstack/react-select 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @contentstack/react-select 可以商用吗？

@contentstack/react-select 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @contentstack/react-select 的下载量有多少？

根据 npm 官方下载统计，@contentstack/react-select 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,737 次，日均约 258 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @contentstack/react-select 还在维护吗？

最新版本 3\.2\.10 发布于 2026/05/12（5 个月前）；至今共发布 13 个版本，其中过去 12 个月发布了 5 个；首次发布于 2025/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。