React-select & creatable select，reatc-hook-form关注验证错误
React-select & creatable select是一对用于React前端开发的UI组件库，用于创建可自定义的下拉选择框和可创建新选项的下拉选择框。
React-select是一个高度可定制的下拉选择框组件，它提供了丰富的功能和选项，包括搜索、多选、异步加载、自定义样式等。它可以帮助开发者快速构建交互性强、用户友好的下拉选择框。
Creatable select是在React-select的基础上进行扩展的组件，它允许用户在下拉选择框中输入新的选项，并将其添加到选项列表中。这对于需要动态添加选项的场景非常有用，比如标签选择、自定义选项等。
React-hook-form是一个用于处理表单验证的React库。它提供了一种简单且强大的方式来管理表单状态、验证输入数据，并处理验证错误。React-hook-form基于React的hooks特性，使表单验证变得更加简洁和易于维护。
关于验证错误，React-hook-form提供了多种验证方式，包括必填字段、最小长度、最大长度、正则表达式等。当验证失败时，React-hook-form会自动收集错误信息，并将其与相应的表单字段关联起来，方便开发者进行错误提示和处理。
对于React-select & creatable select和react-hook-form的应用场景，它们可以广泛用于各种需要下拉选择框和表单验证的前端应用中。比如用户注册、数据筛选、表单提交等场景都可以使用这些组件来提升用户体验和数据的准确性。
腾讯云提供了一系列与React开发相关的产品和服务，包括云服务器、云数据库、云存储、人工智能等。具体推荐的产品和产品介绍链接地址可以根据实际需求进行选择。
相关·内容
我正在创建一个React应用程序并使用react-select。我正在尝试使用可创建的部分，但是当我导入它时，我得到了一个错误。 我安装了react-select和@types/react-select npm install --save react-select
npm install --save-dev @types/react-select 当我像文档上说的那样导入时 import Creatable from 'react-select/creatable'; 我得到了这个类型错误 Could not find a declaration file for mod
浏览 18提问于2019-06-27得票数 1
1回答
我想问一下，我有一个很大的代码库，我们使用react-select，有时还带有一个可创建的选项。
问题是，当我们使用react-select/creatable时，我需要同时使用两者还是只使用creatable？
浏览 8提问于2021-02-26得票数 0
我试图使用react select的创建类型为输入字段的数字。下面的代码。
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Creatable from "react-select/creatable";
import { components } from 'react-select';
const Input = props => {
if (props.isHidden) {
return <c
浏览 4提问于2020-01-30得票数 2
回答已采纳
我在一个ClojureScript项目中使用react-select，但是有一个硬编码的字符串需要翻译(参见)：
function promptTextCreator (label) {
return `Create option "${label}"`;
}
我将发送PR以使此字符串可配置，但同时我有一个问题。
如果我从JS控制台检查我的应用程序，我可以输入：
> window.deps["react-select"]["Creatable"].promptTextCreator
哪种打印
ƒ c(e){return'Cr
浏览 0提问于2017-09-07得票数 2
react-select (值得称赞)，当我输入任何内容时，它总是给我这个错误：
Creatable.js?067d:40 Uncaught TypeError: Cannot read property 'toLowerCase' of null
at compareOption (Creatable.js?067d:40)
at eval (Creatable.js?067d:51)
at Array.some (<anonymous>)
at isValidNewOption (Creatable.js?067d:50)
at Creatable.compon
浏览 1提问于2018-08-19得票数 1
1回答
我正在尝试创建一个带有react select的select元素，并为此使用了create组件。
使用我当前的实现，它不会提示用户输入"create“选项，就像在上显示的那样，它将显示默认的"No options”。
我也在使用redux-form库，但我认为问题不在于此。
到目前为止，我的代码如下：
import Select from "react-select/creatable";
import React from "react";
const customFilter = (option, searchText) => {
浏览 2提问于2020-07-05得票数 6
回答已采纳
我希望能够以编程方式focus()和select()一个react-select。单击下面的Add new brand： ? 应该呈现如下所示的内容： ? 这是我到目前为止所掌握的。 我的Select组件包装在React.forwardRef中 const Select = React.forwardRef((props, ref) => {
return (
<Creatable ref={ref} {...props} />
)
}) 这样我就可以使用styled-components对其进行样式设置，同时仍然可以对其输入使用ref，如下
浏览 25提问于2020-05-03得票数 2
1回答
我有一个多个选择，当我不得不选择选项时，我只想看到最初的5个选项，这取决于我所写的内容，但我不知道该如何做
这是我的代码：
import React from "react";
import ReactDOM from "react-dom";
import Creatable from "react-select/lib/Creatable";
import { components } from "react-select";
import "./styles.css";
const options = [
浏览 1提问于2022-03-12得票数 1
我刚刚更新了react选择库，我发现它不再起作用了。在上，我找到了这个升级指南，它对我没有帮助，什么也没说。
我也检查了，但是它给了我同样的错误。
例如，我想做一个非常基本的可创建的选择：
import AsyncCreatableSelect from 'react-select/async-creatable';
const promiseOptions = (inputValue: string) =>
new Promise<any[]>((resolve) => {
setTimeout(() => {
cons
浏览 15提问于2022-03-30得票数 9
回答已采纳
使用React-Select Creatable时，我是否可以从下拉菜单中仅隐藏创建新选项。我想像往常一样显示其他建议，并希望保留创建新标签的可创建功能。我只是不想在下拉菜单中显示用户正在输入的内容。
编辑:为React-Select添加示例代码：
import React, { Component } from 'react';
import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
{ value: 'chocolate', la
浏览 2提问于2018-08-06得票数 3
回答已采纳
有什么方法可以指示react-select在菜单关闭或选择模糊不清的菜单上选择一个选项，但前提是它是创建的(不是从默认列表中创建的)？
上下文：
我有一个电子邮件地址列表，并希望允许用户从列表中选择或键入新的电子邮件地址，然后单击Submit按钮。我用react-select的Creatable组件完成了选择部分，它可以工作。
import CreatableSelect from 'react-select/creatable';
<CreatableSelect
options={options}
isMulti={true}
isSearc
浏览 3提问于2020-09-14得票数 3
回答已采纳
1回答
我使用多个select输入和，问题是我不能清楚用户为任何项目或所有项目编写什么，我尝试了使用isClearable={true}，但是没有什么改变。对于选择带有选项的输入，它工作正常
有什么帮助吗？
import React, { useState } from 'react'
import Creatable from 'react-select/creatable'
const Register = props => {
const [tagInputValue, setTagInputValue] = useState(''
浏览 7提问于2022-07-14得票数 0
准备好迎接一个复杂的挑战了吗？
使用react-hook-forms和react-select使用creatable (用户动态创建多个输入)
我正在尝试实现一个表单，它使用4个单选按钮上的选项，其中2个显示多个输入(使用react-select的输入，其中用户可以创建多个条目，而不是下拉列表)，并试图在最终的useForm()对象中跟踪单选输入和多个输入。我还需要能够删除他们，如果用户改变主意或重置在一起的形式。现在，当我更改radioTwo并输入输入时，registrationTypes的键值会发生变化。我也不知道如何删除用户输入。我使用Controller来读取条目(尽管我听说如果使用原
浏览 8提问于2021-11-06得票数 0
1回答
我使用的是的'Creatable‘道具。当我编写自定义选项(例如，测试代码4)时，它将显示文本'create选项“"Test 4"。但是，当我单击该选项时，下拉列表变为空白，该选项也没有添加到选项列表中。
库链接到演示：
库链接到演示源代码：
选项:下面的列表来自数据库。dataSource = [ {name: "Test1", label: "Test code 1", type: "text"}, {name: "Test2", label: "Test code 2
浏览 4提问于2017-12-19得票数 3
我对我的项目使用了react-select Creatable，并且我需要覆盖它的默认行为。目前，每当用户键入内容并按Enter键时，它都会被添加为一个新选项。 有没有办法将其更改为“每当用户键入内容并按下空格键时，它就会被添加为一个新选项”？
浏览 20提问于2021-07-14得票数 1
我们有一个表单，这是反应最终的形式，并希望在该表单中的选择和创建字段。 我如何在react最终表单中使用这样的组件。 目前我尝试在表单中使用react-select的Select.Creatable，但是一旦我从下拉列表中选择了一些东西并更新了状态，表单就变得清晰了，即回到了它的初始状态。 请帮帮忙！
浏览 10提问于2019-06-14得票数 1
回答已采纳
当我点击"Apple“按钮时，我想选择"Apple”选项
import React from "react";
import { render } from "react-dom";
import ReactDOM from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";
class ReactSelect extends React.Component {
浏览 7提问于2022-05-03得票数 0
回答已采纳
我继承了我的第一个react，我需要做一个看起来非常直截了当的改变。
更改出现在电子邮件注册页面上，用户有一个多选择下拉菜单来表示他们感兴趣的内容。我的简单目标:使下拉菜单中的项目之一出现预选。(最终，我将传递一个值，因此它只是偶尔被选中)。在本例中，列表值/标签来自DESSERT_TYPES，我想预选列表中的一个值：“工作表蛋糕”。
阅读react选择文档/示例，看起来我只需要提供一个值支柱，但我尝试在字段定义、value= 'Sheet cake'、value={{label: "Sheet cake", value: "Sheet cake"
浏览 0提问于2018-10-23得票数 0
回答已采纳
我在一个react-hook-form中使用了create select组件。我尝试了react-select和creatable-react-select两者，我在这个问题的上下文中体验到的行为是相同的。
使用最新的react-hook-form (7.6.1)，当有错误绑定到字段时，我不能将字段设置为焦点。
当我使用一个老版本的react-hook-form时，我可以让这个行为像预期的那样工作。
因为我想让这个行为在最新的react-hook-form中工作，对于第一个例子中的问题有什么建议吗？
浏览 3提问于2021-05-19得票数 0
回答已采纳
1回答
我使用react-select和material-ui一起制作了一个外观和功能类似于材料的自动完成组件。
我遵循了这里的基本设置
然后必须按照API处理的方式调整我的数据结构，这一切都很好，但现在我尝试允许用户创建一个新选项，而且我似乎无法让它显示该选项。
以下是原样的组件
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from "./styles";
import Me
浏览 0提问于2018-07-12得票数 1
回答已采纳
我正在使用react-select Creatable组件。每当我选择长值时，它就会被截断，并在所选值的末尾添加3个点。有任何方法可以禁用此截断吗？我希望看到全部选定的值。
如果有什么帮助，这是我的代码
<ReactCreatableSelect
disabled={isDisabled}
filterOption={createFilter({ ignoreAccents: false })}
options={options}
onChange={this.onNewSelec
浏览 1提问于2019-07-02得票数 1
回答已采纳
我有一组使用react-select包- https://react-select.com/home的react选择。 我有一个组件，它包装了三个react-selects -基本上类似于： import Select from "react-select"
function SelectGroup(){
const ref1 = useRef(null);
const ref2 = useRef(null);
const ref3 = useRef(null);
return (
<div&g
浏览 43提问于2021-05-01得票数 1
回答已采纳
2回答
很抱歉这个问题，我是react的新手。
我有一个组件"QuickLaunch“，其中包含2个组件:一个基于反应选择的组件"MySelect”和一个自定义数据表组件( datatable )。
Quicklaunch中的render函数如下所示：
render() {
return (...
<MySelect item="lists" searchField="name" condition="list_type_id=1" multi={true} name="select-list"
浏览 0提问于2017-09-20得票数 3
我使用react-select中的select已经有一段时间了。到目前为止，只有预定义的选项，没有任何添加任何其他选项的功能。 据我所知，还有一种叫做creatable的东西就是这样做的。但据我所知，它不允许我的预定义/静态列表。 我假设两者都必须实现才能获得功能，或者有没有一种方法或道具可以只坚持其中之一？ 编辑:也许我没有足够强调静态部分。基本上，我希望有一个组件，有一个道具喜欢：“canAddOptions:bool”。To允许或不允许添加值。据我所知，我必须实现这两者才能得到这个..？
浏览 15提问于2020-07-10得票数 0
回答已采纳
我试图根据这个对象显示从后端收到的兴趣列表：
profile : {
interest: ["interest1", "interest2"],
};
我就是这样实现它的：
import Creatable from "react-select/creatable";
class EditProfileInSettings extends Component {
constructor(props) {
super(props);
this.state = {
previously_selected_int
浏览 0提问于2021-05-13得票数 0
我有一个react组件，我想在这个组件中添加预定义的值。我该怎么做？我的react-select框组件如下所示：
import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
var CreatableDemo = createClass({
displayName: 'CreatableDemo&
浏览 0提问于2018-04-08得票数 3
我有两个最小和最大属性的<CreatableSelect />，如果第一个<CreatableSelect />的值小于第二个<CreatableSelect />选项，有没有办法禁用第二个<CreatableSelect />的一些选项？我使用的是react-select v2。我知道isOptionDisabled属性是可用的，但一旦两个选项中的一个发生更改，我就需要禁用选项。我还可以修改传递给<CreatableSelect />的options对象，并设置另一个属性isDisabled，但这似乎效率不高。 import
浏览 5提问于2019-02-07得票数 0
使用react-testing-library，我希望测试一个在React中实现的表单。 该表单包含类型为react-select的React组件。 必须单击react-select组件中没有标签、没有文本等的部分(例如，下拉箭头)。 通常，react-testid library的方法是向有问题的项目添加一个“data-testid”属性。 我发现，通过为react-select组件提供'classNamePrefix‘属性，可以为react-select的每个部分提供一个CSS类属性。有什么方法可以对data-testid属性做同样的事情吗？ 注意:我知道我可以提供react-s
浏览 119提问于2019-09-06得票数 6
2回答
onSubmit(values) {
console.log("i m clicked", values); /// i didn't get form values
here.
}
renderMacros() {
const { handleSubmit } = this.props;
const macrosData = this.props.macros.macros;
const categoryMacrosData = this.props.categoryMacros.category;
console.log("catego
浏览 0提问于2018-12-23得票数 0
我已经写了一个小组件，可以在Chrome和Firefox中正确呈现，但不能在IE11中正确呈现。应用程序的主要入口点设置了IE兼容性：
doctype html
html
head
meta(http-equiv='X-UA-Compatible', content='IE=edge')
title= title
link(rel='stylesheet', href='./stylesheets/eventinfo.css')
body
block content
我的组件如下所示：
import React f
浏览 0提问于2017-01-15得票数 0
在我自己的例子中，我正在努力实现一个带有material ui的react-select版本。文档中给出的示例非常复杂。
当我试图复制代码时，我得到了以下错误
ERROR in [at-loader] ./src/public/components/select.tsx:13:37
TS2307: Cannot find module 'react-select/lib/components/containers'.
用于以下依赖项。
import { ValueContainerProps } from "react-select/lib/components
浏览 0提问于2019-07-03得票数 0
我正在尝试有一个多可创建的，其中用户可以选择一个预设值，并自己“创建”相同的值，在相同的交互中。例如，我的渲染外观 import CreatableSelect from 'react-select/creatable';
function test(){
render(
<CreatableSelect
isMulti
onChange={this.handleChange}
options = [{ value: 'Blue', label: 'B
浏览 15提问于2020-12-11得票数 1
正在尝试使用React-Select进行设置。它在标准的React项目中工作得很好，但在Typescript React项目中工作得很好(两者都使用Create-React-App和webpack)。
在我的typescript项目中，它显示"Select“is not exported。我可以选择"SelectBase“，但它并不像预期的那样工作。
采取的步骤:我通过npm安装了react-select和@types/react-select。
在我的组件中，当试图从'react-select‘导入Select时，我在"Select“上得到了typescrip
浏览 0提问于2019-03-25得票数 3
我是React的新手，我正在尝试将react从旧版本升级到16.9。 除了下面这个我必须升级到3.0.4版本的组件之外，一切都运行得很好。 问题是，当我选择一个值时，它被选中了，但我在屏幕上看不到选定的选项，而只看到默认的占位符。 我发现很少有答案说明我必须使用完整的对象来设置值，根据我的理解，我正在这样做。 有人能帮我找出问题所在吗？ // @flow
import React, { Component } from "react";
import ReactSelect from "react-select";
import { isNil } from
浏览 18提问于2019-09-16得票数 3
我在用：
反应15.6.2
redux-表格7.2.0
react选择1.2.1
我还没有为这件事设置密码，这很复杂。希望有人能从源头上看到问题。我可以做梦，不是吗？
我有一个redux-form显示一个invoice对象：
invoice = { client: { email: 'someguy@somewhere.com' } }
摘要:我使用react-select.creatable作为电子邮件下拉列表的自动完成组件。选择一个email设置invoice上的client。
当我创建一个新的电子邮件地址并选择它，然后模糊的输入字段，输入值将
浏览 1提问于2018-02-24得票数 1
我试图使用的 select组件来允许用户添加多个CORS源程序，以便为我的身份验证服务器注册。我希望能够允许用户粘贴完整的URL，并在将这些URL添加到可创建的URL后，将它们转换为源程序(format：<protocol>://<origin>[:port])。
例如，用户可以将http://some-domain.com:1234/management/clients?param1=abc¶m2=123#fragment_stuff粘贴到可创建的选择中，整个URL将自动转换/添加为它的原始组件：http://some-domain.com:1234。
浏览 3提问于2021-03-07得票数 0
回答已采纳
1回答
如何添加特定的分支/工作区
、、、、
我分叉反应-选择添加两个功能，目前的反应-选择不具备。我创建了一个分支，并将它提交给了我的分叉项目。现在，我想使用分叉的项目。
我试过安装分叉反应-选择回购以下方式，但没有成功。
yarn add @react-select/monorepo@<GithubUsername>/react-select#head=<Name of branch>&workspace=react-select
yarn add @react-select/monorepo@<GithubUsername>/react-select#commit=<commit#
浏览 6提问于2021-06-07得票数 1
我正在尝试在我的rails项目中使用react-select。我已经安装了gem 'react_on_rails'，但我遇到了一点问题。
我使用npm install安装了react-select，并希望使用import Select from 'react-select'，但随后我在启动时收到了许多服务器错误
Module not found: Error: Cannot resolve module 'imports' in ...
以及web浏览器控制台错误：
Uncaught Error: Cannot find module "
浏览 8提问于2017-01-15得票数 0
模块导入不适合我。我尝试了不同的解决方案，从堆栈溢出和其他。以下是我要遵循的步骤--
npm install --save @types/react-select
像这样导入模块
import Select from "react-select"
但我得到了错误
模块未找到:错误:无法解决“反应-选择”
import * as React from "react";
import ReactSelect from 'react-select'
export class Select extends extends React.Compon
浏览 0提问于2018-11-13得票数 6
回答已采纳
1回答
我使用可创建的选择，以允许用户输入一个新的选项，而不是在下拉列表。但是在查看之后，我似乎看不到在创建可创建的选择之前将最大输入设置为50个字符的方法。
我已经看过接受新的条目，如果超过50个字符删除它，然而，这似乎是一个很长的道路，并希望使用一些更短的实际输入时，用户选择创建。
import CreatableSelect from 'react-select/creatable';
const cars = [
{ label: "audi", value: 1 },
{ label: "bmw", value: 2 },
{ l
浏览 1提问于2019-08-28得票数 0
回答已采纳
1回答
在我导入了一个特定的模块之后，在本例中是'react-select‘from 。例如，我的react lint用大量的lint警告来提示我。模块中的代码没有通过lint验证。我犯了一个错误，在我的源文件中包含了模块代码。
./src/~/react-select/lib/index.js中的警告
/home/tonyu2/ui/src/node_modules/react-select/lib/index.js 1:1在严格的模块内不需要警告'use strict‘
✖1问题(0个错误，1个警告)
./src/~/react-select/lib/AsyncCreatable
浏览 7提问于2018-01-17得票数 0
我有一个令我困惑的语法错误。我在运行npm run tsc的同一目录中有一个node_modules目录，一切正常，没有语法错误。
出于某些原因，我将node_modules目录移到我的主目录~。没有更改目录，我重新运行npm run tsc，得到语法错误：
../../../../../node_modules/@types/react-select/index.d.ts(18,46): error TS1005: ',' expected.
../../../../../node_modules/@types/react-select/index.d.ts(22,31)：错
浏览 1提问于2017-11-01得票数 0
1回答
我目前正在使用Astro和Fastify\Node作为我的服务器。我创建了一个SSR\Fastify插件并运行良好。不过，我遇到了一个问题，想看看其他人是否也遇到过类似的问题。我无法使用React。当运行正常的Astro而没有启用SSR时，它工作得很好。运行build命令后，当页面试图加载时，我收到以下错误消息:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于复合组件)，但为got: object。“
我倾向于进口问题，但没有任何运气缩小它。
类型定义解析为:react-select/dist/ The selectcjs.d.ts
如果我使用节点ssr插件，我也会得到同样的错误。我
浏览 5提问于2022-10-10得票数 0
yarn create react-app
yarn add react-select 我使用create- react -app创建了一个react应用程序，它工作得很好。然后我想使用react-select，所以我用yarn安装了它，添加了一个像import Select from "react-select/src/Select";这样的导入语句 我得到了这个错误： Failed to compile.
./node_modules/react-select/src/Select.js
SyntaxError: ~~~~\node_modules\react-sele
浏览 58提问于2020-04-29得票数 2
我在不通过NPM导入模块时遇到问题：
我创建了代码库，也尝试了本地安装，但没有成功，所以我尝试通过github进行安装。
我已经尝试过使用import和require，如下所示。我不太确定为什么它一直坚持在本地寻找
有问题的文件在utils文件夹中，这可能是它在那里搜索react-select的原因。
import Select from "@react-select/monorepo";
const Select = require("@react-select/monorepo");
工作方式(通过npm存储库安装时)：
import Select from
浏览 0提问于2020-06-12得票数 1
在Github上，它说它是最新的版本1.0.0-rc ()
在NPM上，它显示的是version v1.0.0-rc.5 ()，.5最后会有什么不同吗？
我需要github版本，因为这个版本使用了ES6类。
但是，在使用命令npm install react-select时(即使在第一次卸载之后)，我没有匹配的github版本。
我确实通过github URL通过installign获得了最新文件：
npm install git+https://github.com/JedWatson/react-select
Hoewever，当我通过webpack构建整个项目时，它说它不能解析存在于我的
浏览 18提问于2017-08-25得票数 0
1回答
在之后，我试图将npm包添加到路由文件中。在本例中，我们将添加React-select。在路由文件中直接导入包不起作用，因此我们创建了一个util文件来处理导出包。
我们应该添加这样的包：
import Select from 'react-select'
<Select options={[{ label: "label", value: "value" }]} />
在REMIX应用程序中，我们将尝试从utils文件中添加包。
utils/select.server.ts
export * from 'react-sel
浏览 4提问于2022-04-01得票数 0
我在我的第一个React应用程序中使用了React-Select，但我不确定如何在一个表单中处理多个选择。 有没有什么方法可以把道具传递到ReactSelect.jsx文件中，这样我就可以在一个表单中有多个选择，每个选择都有自己的属性/数据？ 处理这个问题的正确方法是什么？ 参考：Experimental Popout App.js import React from 'react';
import ReactSelect from './ReactSelect'
function App() {
return (
<Reac
浏览 29提问于2021-01-13得票数 1
我已经安装了react选择3.1.0，但是当我试图导入文档中定义的这个文件时，它会给我带来错误。
/home/.../src/core/components/kiosk/Component_file.tsx(3,25)：中的TypeScript错误找不到模块‘react select/异步’的声明文件。'/home/.../node_modules/react-select/async/dist/react-select.cjs.js‘隐式地具有“任意”类型。TS7016
进口代码行：
import AsyncSelect from 'react-select/async
浏览 1提问于2020-10-03得票数 3
回答已采纳
我已经实现了，允许根据自动补全建议输入标签和/或插入新标签。
我的实现如下：
import Select from 'react-select';
...
<Select.AsyncCreatable
className='add-tags'
clearable={!!selectionTags}
placeholder={'add more'}
name="form-field-name"
value={selectionTags}
onChange={setSele
浏览 2提问于2017-08-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
