从另一个组件调用react-select时defaultValue不工作
问题描述：从另一个组件调用react-select时defaultValue不工作。
答案：当从另一个组件调用react-select时，defaultValue属性可能不起作用的原因有以下几种可能性：
- 组件之间的数据传递问题：确保正确传递了defaultValue属性值到react-select组件。可以通过props将值传递给react-select组件，并在组件内部使用props.defaultValue来设置默认值。
- 组件生命周期问题：defaultValue属性只在组件首次渲染时生效。如果在组件渲染之后动态改变了defaultValue的值，需要使用value属性来设置默认值。
- 数据格式问题：defaultValue属性需要与react-select组件的选项数据格式相匹配。确保defaultValue的值与选项数据中的某个值相等。
- 组件版本问题：检查所使用的react-select组件版本是否与其他相关组件版本兼容。有时，不同版本之间可能存在一些兼容性问题。
针对这个问题，腾讯云提供了一款适用于前端开发的云产品——云开发（CloudBase），它提供了全栈云开发能力，包括前端开发、后端开发、数据库、存储等功能。云开发支持多种前端框架，包括React，可以轻松构建前端应用并与后端进行数据交互。
推荐的腾讯云相关产品：云开发（CloudBase）
产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
1回答
react-select中的"defaultValue“不选择下拉列表中的选项，但"value”选择下拉列表中的选项
javascript、reactjs
我正在学习react，并且遇到了一些我无法理解的react-select行为。 我有一个react-select组件，它的值是从一个api调用中获取的。如果我使用defaultValue，则它不会从dropdown中选择值，但如果我使用value，则它会为dropdown选择值。 我只是搞不懂为什么defaultValue不能工作。其中“options”作为道具从其他组件传递，它们是从api
浏览 19提问于2019-03-08得票数 0
回答已采纳
1回答
从另一个组件调用react-select时defaultValue不工作
reactjs、react-select
我将一个选项列表从父App.js发送给子组件Dropdown.js，在那里我在Select中呈现它们。然后，我想在Select中设置defaultValue，以便在打开父页面时选择我定义的选项之一。我已经将它设置为defaultValue={{ value: "strawberry", label: "Strawberry" }}，如果我将Dropdown.js中的所有操作都作为父组件执行，它就会工作，但是如果我将Dropdown.js作为子<em
浏览 26提问于2021-08-18得票数 0
回答已采纳
1回答
一旦useSelector钩子返回值，有没有办法重新呈现React-Select组件？
reactjs、redux、react-select
我有一个表单，当我输入数据并提交它时，我将数据发送到reducer，然后将其保存到SQL数据库中。数据库返回给我输入的数据加上一个ID，我将其存储在我的存储中。现在我有了另一个React-Select组件，我希望它将输入的数据显示为DefaultValue。我正在寻找一种方法，使React选择组件在从useSelector挂钩返回真值时重新加载，并且最好是在该值发生更改时重新加载。import React, { useEffect } from 'react&
浏览 23提问于2021-03-18得票数 0
1回答
在下拉列表中显示预选数据
javascript、reactjs
目标：例如，约瑟夫的数据“关于月份”是值2，而在下拉列表中，将出现的第一个数据是“Feb”为了实现这个目标，需要在源代码中修改什么？*我是Reactjs的新手
浏览 3提问于2021-05-20得票数 0
回答已采纳
1回答
从react中获取值-以react钩子的形式选择组件？
reactjs、react-select、react-hook-form
我试图在使用react-select创建的表单中使用react-hook-form组件。我遵循了react钩子表单网站的说明，但是当我提交表单时，来自select组件的值是"" (默认值)。我知道表单一般都能工作，因为与ref={register}一起输入的其他值工作得很好。这只是我使用Controller的一个值。我是在Select组件中丢失了一个道具，还是在其他地方出错了？={<PublicShareNetworkSelect /
浏览 4提问于2021-01-18得票数 3
回答已采纳
1回答
如何让Yup表单验证器识别react选择defaultValue并提交表单？
javascript、reactjs、react-select、react-hook-form、yup
我正在尝试在react select组件中呈现defaultValues。使用正确的默认值显示的react-select组件。但是，我的Yup验证不承认默认值(见下面的图像)为有效的选择。因此，尽管填好了字段，表单还是不会提交。有人能建议我如何让我的Yup验证器识别defaultValue吗？请参阅我的中的工作代码版本，它演示了这个问题。
浏览 3提问于2022-01-12得票数 -1
2回答
react使用useState钩子时不呈现选择默认值
reactjs、react-select
我正在尝试从react select包中为defaultValue组件设置<Select />。import Select from "react-select";
exportsetDefaultValues([data[0], data
浏览 14提问于2022-12-04得票数 0
回答已采纳
1回答
React-提交时未定义select defaultValue
reactjs、react-select
我将react-select用于单个选择菜单。当我编辑表单时，defaultValue似乎显示正确，但当我提交表单时，如果选择保持不变，则返回的值为undefined。如果我单击defaultValue，那么它在提交时工作正常。是否有一个额外的prop，我遗漏了通过提交来维护defaultValue？代码如下： closeMenuOnSelect={true} de
浏览 4提问于2020-08-25得票数 2
回答已采纳
1回答
React-选择异步获取
javascript、reactjs、react-select
我正在使用react和react-select，并尝试从api中获取选项。一切都在我身上工作，但我想展示的是，当数据来自api时，将文本加载到react-select中。下面是我的react-select组件： <Select onFocus={this.getData} this.setState({
浏览 19提问于2019-05-21得票数 1
5回答
如何设置多选的defaultValue？
react-select
因此，我需要将defaultValue传递给一个启用了多选的react-select组件。我已经尝试了我能想到的所有方法:字符串数组、对象数组、字符串等等。似乎什么都不起作用。
浏览 0提问于2018-11-15得票数 9
1回答
我的选择组件不执行onChange (React.js)
javascript、reactjs
我有一个ResiveSelect.com组件，它在默认情况下执行一个onChange操作。我想要做的是设置与第一个一起执行的另一个操作。问题是:当我将一个函数传递给onChange时，它会覆盖另一个函数。我试着做一些更改，但它没有工作，所以我将在这里展示我的代码没有它们。My组件：const [field, defaultValue, {setValue}] = useField(props.fie
浏览 2提问于2021-03-17得票数 1
回答已采纳
1回答
如何显示react-select的工具提示？
javascript、reactjs、react-select
我需要使用react-tooltip库显示react-select容器的工具提示(而不是单独的选项)。我在原始组件的基础上制作了自己的SelectContainer组件，并在其中添加了data-tip和data-for属性。工具提示显示，但当我更改选定的值时，它将消失，并且不再显示。<ReactTooltip effect="solid" html={true} place="bottom" id={tooltipId} />
浏览 1提问于2019-08-06得票数 4
1回答
React选择:从V4迁移到V5，在表单提交时给出未定义的值
javascript、reactjs、jsx、react-select、uniform
我正在尝试从react迁移-选择v4到v5。所讨论的表单/字段与v4一起工作，同时将统一用于返回示例输出的表单，如： "skill": { "label": "Skill 1"当我尝试使用V5时，我得到了一个空对象。有一个表单页面，它使用“下拉”组件，这就是我使用react select的地方。/Input Fields/
浏览 9提问于2022-03-03得票数 0
1回答
输入键按下异步反应选择时如何忽略onBlur事件调用
javascript、reactjs、react-select
我是使用异步组件的反应-选择内嵌编辑在ag-网格.(onChange)中有一个可用的事件，当我们进行更改时，它捕获值和操作。但是，当我按enter按钮从下拉列表中选择一个项时，不会调用onChange方法。我之所以注意到这一点，是因为在我按下下拉菜单上的enter按钮之后调用了onBlur方法。下面是异步组件的示例-className = "async-multi-select"
classNamePrefix="react-select</em
浏览 6提问于2022-04-27得票数 0
2回答
在组件中调用的函数没有更新的道具
javascript、reactjs
我已经为我的问题创建了一个可重复的测试，我不明白为什么在调用setDefaultValue并更新组件之后(您可以看到它是使用我的console.log的结果更新的)，如果现在我单击重置按钮而不是新的defaultValue，我会看到旧的defaultValue。', defaultValue) }
console.log('TextBox DefaultValue',
浏览 1提问于2022-08-25得票数 0
1回答
React-选择导入失败并显示Typescript
reactjs、typescript、react-select
正在尝试使用React-Select进行设置。它在标准的React项目中工作得很好，但在Typescript React项目中工作得很好(两者都使用Create-React-App和webpack)。我可以选择"SelectBase“，但它并不像预期的那样工作。
采取的步骤:我通过npm安装了react-select和@types/react-select。在我的组件中，当试图从'react-select
浏览 0提问于2019-03-25得票数 3
1回答
React select:默认值只有在设置为静态时才会更新
javascript、reactjs、react-select
我试图根据这个对象显示从后端收到的兴趣列表： interest: ["interest1", "interest2"],我就是这样实现它的： constructor(props)={previously_selected_interests}
&#
浏览 0提问于2021-05-13得票数 0
2回答
异步填充react-select
react-select
给定在react-select ()中进行的选择，我使用axios ()从远程url抓取数据，以便填充页面上的第二个react-select。诀窍是，我认为我的用例与异步示例的不同之处在于，我不希望用户必须在第二个select中键入内容来触发自动填充。我希望当数据从AJAX调用返回时，自动填充立即发生
我已经确认我正确地获取了远程数据，但是我不能确定react-select的loadOptions参数的正确语法。
浏览 16提问于2017-07-18得票数 1
1回答
如何使用React_Select呈现所选选项？
reactjs
我是React的新手，我正在使用React Selectimport Select from 'react-selectonChange ={this.handleChange} defaultValueFragment> );}
export def
浏览 5提问于2021-03-11得票数 0
2回答
停止父组件的重新呈现。只重呈现子组件
javascript、reactjs、render、react-select、formik
我有一个React select，在Formik字段中，当您从下拉选项中选择一个项时，所有父组件都会被重新命名。这是容器中可用的最深的子组件。--TLDR--问题:使组件只保留对自身的呈现。它中使用的外部组件，Formik和React-Select。closeMenuOnSelect={false}
浏览 0提问于2019-06-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
