javascript - 如何在反应选择下拉列表中单击按钮添加选择?
问题描述
我目前正在尝试在反应选择多输入下拉列表中获得一个反应按钮来“进行选择”。
我希望我的应用程序允许用户从下拉菜单和按钮中选择项目。但是,当单击按钮时,react-select(下拉)元素应显示按钮选择的值。它使我的特定用例的功能更加直观。
这就是我的选择(来自 react-select 模块的多下拉菜单)和按钮组件的样子:
<Select
options={props.options}
isMulti
onChange={handleDropdown}
placeholder={props.placeholder}
/>
<Button
onClick={addSelection}
/>
这就是我的函数的样子:
const handleDropdown = (selected) =>{
//Saving the array of selected items into a variable (selected_values)
selected_values = selected
}
const addSelection = (event) =>{
//make dropdown value "car" appear as selected in select component (dropdown)
}
到目前为止,我有点迷路了。我对 React 的做事方式很陌生。
我尝试使用 refs 来定位下拉列表,但它没有产生任何结果。react-select 模块文档建议修改组件道具以访问其下拉操作,但这不适用于我的特定情况,因为我无法从外部组件(我想使用的按钮)使用它。
我感谢任何可能帮助我找到解决方案的回复。朝着正确的方向推动将不胜感激。
解决方案
因此,经过一些重新考虑和评论的一些帮助,这是解决这个特定问题的方法:
此解决方案适用于类组件
组件标签:
<Select
value={this.state.selectedValues}
options={this.state.options}
isMulti
/>
<Button
onClick={this.addSelection.bind(this)}
{/* Working in a class component, so "this" was added, and it was binded
in order to be able to access it in its addSelection function */}
/>
功能:
//Part of class component:
addSelection () {
this.setState({selectedValues: {value: 280, label: "Car"}})
}
基本上,我们将下拉列表的值设置为保持在一个状态(selectedValues)内。从那里,我们可以通过单击选择组件外部的按钮来修改它的值。一旦状态被修改,它们会触发组件的重新渲染,进而更新下拉组件的值。
推荐阅读
- c# - C# 一个 if 语句中有多个布尔值
- android - 线图数据点显示的距离很大
- php - 使用 volley 从 android 应用程序将数据插入 mysql 数据库
- python - python-telegram-bot:如何在更改代码并重新运行后保持机器人工作
- python - 将最后一行 n 次添加到时间索引数据框,同时每次将日期增加 1 天
- reactjs - 异步定义 HOC
- r - 评估父框架和当前框架
- android - 如何从 Web 服务将 ViewPager 中的片段添加到 TabLayout?
- spring-mvc - 如何在 Spring MVC 上制作一个禁止直接请求但允许服务器请求的方法?
- php - 从 For Each Loop WordPress 中获取名称的 ID :(