如何在reactjs中为自动补全组件设置多个值
在ReactJS中为自动补全组件设置多个值，可以通过以下步骤实现：
- 首先，确保你已经安装了ReactJS和相关的自动补全组件库，比如react-autocomplete或react-select。
- 创建一个React组件，并在组件的state中定义一个用于存储自动补全选中值的数组。例如：
import React, { useState } from 'react';
const AutocompleteComponent = () => {
const [selectedValues, setSelectedValues] = useState([]);
// 其他组件逻辑...
return (
<div>
{/* 自动补全组件代码 */}
</div>
);
};
export default AutocompleteComponent;- 在自动补全组件的回调函数中，将选中的值添加到selectedValues数组中。例如：
import React, { useState } from 'react';
const AutocompleteComponent = () => {
const [selectedValues, setSelectedValues] = useState([]);
const handleAutocompleteChange = (value) => {
setSelectedValues([...selectedValues, value]);
};
// 其他组件逻辑...
return (
<div>
{/* 自动补全组件代码 */}
</div>
);
};
export default AutocompleteComponent;- 在组件中展示已选中的值。可以使用map函数遍历selectedValues数组，并将每个值渲染到页面上。例如：
import React, { useState } from 'react';
const AutocompleteComponent = () => {
const [selectedValues, setSelectedValues] = useState([]);
const handleAutocompleteChange = (value) => {
setSelectedValues([...selectedValues, value]);
};
// 其他组件逻辑...
return (
<div>
{/* 自动补全组件代码 */}
<div>
{selectedValues.map((value, index) => (
<span key={index}>{value}</span>
))}
</div>
</div>
);
};
export default AutocompleteComponent;这样，当用户选择自动补全组件中的值时，该值将被添加到selectedValues数组中，并在页面上展示出来。
对于自动补全组件的具体实现和使用，可以根据具体的组件库文档进行配置和调整。以下是一些常用的React自动补全组件库：
请注意，以上只是一些示例组件库，你可以根据具体需求选择适合自己项目的自动补全组件库。
相关·内容
我需要在reactjs中将多选值设置为自动完成。我在我的项目中使用Material-UI组件。<code>B0</code>F.你可以在上面看到。我想像这样填充这个值。然后，用户可以删除选定的值或添加新值。和我的父组件</em
浏览 18提问于2020-08-05得票数 1
1回答
自动补全组件(多个)在后台绑定到某些数据，如果自动提供的结果都不符合搜索条件，则在按enter时，应将输入字段的输入值添加到列表中。然而，如果某些结果确实符合搜索条件，我们仍然希望组件以某种方式允许用户将键入的值添加到列表中，并且如果需要的话，不从列表中选择值。
我们试图实现的功能实际上与将电子邮件收件人添加到电子邮件中非常相似。“至”字段自动完成(多个)绑定到用
浏览 0提问于2013-06-07得票数 4
我有一个<Loading />组件，它封装了我的应用程序中的所有路径。 </BrowserRouter> );当用户打开页面时，我需要将Redux状态更改为true，这样<Loading />组件<
浏览 9提问于2022-11-15得票数 1
1回答
在chrome中有一个自动补全的问题。 堆栈: React，Redux-forms autofill behavior 我通过在“自动补全”输入属性中插入随机值来关闭它，并且它起作用了。但我还是得到了如下的建议： 据我所知，这种行为是由redux-form的Field组件使用的input`s的"name“属性引起的。Chrome似乎通过输入名称来记忆数值。有谁知道如何在不使用随机字段名的情况下避免这种自动填充行为？
浏览 22提问于2019-09-30得票数 0
1回答
在jquery中有没有多选的组件？一种自动补全。从下拉列表中选择一个值(自动完成)后，它应该会出现在文本框中，最后会有一个十字。我们可以在单击十字时将其删除。如果选择了多个值，则多个值将出现在其中，并带有一个十字
浏览 1提问于2013-08-06得票数 1
我有一个自动补全字段： ? 我需要使用另一个控件值设置为此下拉菜单选择的默认值，如下所示： ? 此控件将传递给表单加载程序，如中所示： ? 例如，如果使用成本中心为110，如中所示： ? 则Site lookup下拉菜单的默认选定值需要如下所示： ?
浏览 28提问于2019-02-13得票数 0
1回答
第一个字段是自动完成字段。我想有其他4个字段填充的基础上自动完成字段选择。github ajax.autocompleter页面中的文档引用了设置id和使用js函数调用id值，但如果使用多个字段/除了ac值之外还需要多个值，这似乎效率不高。我有自动补全功能，但不确定它的其余部分。我也不清楚如何在php端设置额外的字段参数。我想我可以设置
浏览 4提问于2009-11-05得票数 0
回答已采纳
有人知道如何设置自动补全来很好地使用python、django和vim吗？谁知道如何在vim中设置
浏览 1提问于2009-06-10得票数 48
回答已采纳
到目前为止，这还不错，但是当我想要基于以下内容自动更新内部SelectComponent中的行为时，我会遇到一些问题：
但是，在主要组件中，我在变化检测方面存在问题。如您所见，主组件不会自动将user.v
浏览 4提问于2022-01-30得票数 0
回答已采纳
我的问题是，单击按钮时显示对话框组件的最佳方法是什么。我正在尝试设置var modal的CSS，这给我带来了错误。./src/components/btn-root.js Line 14: 'modal' is not defined no-undef <button id='base-btn'>Order Credit&
浏览 4提问于2017-12-14得票数 0
回答已采纳
我想知道如何在使用jquery选择的插件时将自动补全建议中匹配的部分设置为粗体？
有人知道怎么做吗？
浏览 0提问于2012-06-18得票数 0
回答已采纳
我是ReactJS新手，我想在多个组件之间共享一个变量。 // Do something ... }
// ...}
我在另一个组件中设置// Making an API call and setting globalVariable h
浏览 0提问于2021-07-20得票数 0
2回答
如网页所示，有两种方法可以在HTML文件中使用tern_for_vim插件。
Method1：2..` 这种方法还存在两个问题。为什么？2.如何在document.后自动弹出js补全菜单，而不是输入<C-X><C-O>
Method
浏览 3提问于2018-03-15得票数 6
我们试图使用ReactJS作为每个页面的视图来创建page应用程序。Laravel负责每个视图的路由和呈现。每个视图都加载一个react bundle.js文件。每个bundle.js文件对该视图都是自定义的，并且内部包含该视图(屏幕)所需的react组件。所发现的是每个bundle.js文件大约是4MB，因为每个文件都包含其依赖项以及组件。此外，还在努力研究如何在多个视图之间共享一个组件(如TableComponent.js文件)，但到目前为止一直没有成功。
我们设计
浏览 3提问于2016-03-29得票数 0
回答已采纳
我想用CSS为ReactJS中的图标组件设置页边距-左或边距-按钮组件(ReactJS内按钮)。
在这里，我想在图标和按钮占位符之间添加空间。如何在CSS中实现？
浏览 5提问于2022-02-24得票数 -1
我想要一个自动完成的文本框，如下图所示：
我想在我的VB6应用程序中模拟类似的功能。对如何在VB6中实现
浏览 11提问于2010-03-11得票数 1
我正在设置一个基于dropdownlistA._selectedValue + autocompleteA[0].value的valueX。如果自动补全中没有值，我希望返回“”，而不是“undefined”，这样我就可以将valueX设置为类似于"Sam“的值。我可以将dropdownlist的值设置为“"，而不是自动完成。谢谢。
浏览 0提问于2013-10-31得票数 1
我想有一个自动补全功能，如facebook或linkedin。我在前面用了angularjs。
我需要显示与他们的图像与他们的全名一起找到的档案记录。我如何在md-autocomplete的md-item中设置找到的配置文件的图像(这可能吗)？除了md-autocopmlete之外，有没有更好的方法来实现这种自动完成，而不需要重新发明整个轮子？
浏览 6提问于2017-06-08得票数 0
嗨，我需要关闭primefaces的selectOneMenu的自动补全功能，但是没有这样的属性。我们在inputText和其他一些组件的primefaces中都有这个属性。当用户刷新页面时，如何将自动完成设置为关闭或始终选择默认值。</p:selectOneMenu>请参考我的问题-
浏览 1提问于2013-10-08得票数 0
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
