reactjs - React - 如何在 react-select 中设置默认值
问题描述
我在我的应用程序中使用react-select来显示选择框。下面是我选择的代码。
<Select
className="custom-form-control mb-2"
name="organization_options"
options={this.organizationOptions()}
placeholder={false}
onChange={this.handleChange.bind(this)}
value={selectedValue === "" ? this.organizationOptions()[0] : selectedValue}
/>
以下是我在选择框中已有的选项
0: {value: "62", label: "Dfdf"}
1: {value: "128", label: "Dfdfdsf"}
2: {value: "151", label: "Fgfdgdfh"}
3: {value: "121", label: "Hhhfas"}
4: {value: "55", label: "My Sensor_56"}
5: {value: "13", label: "New Org"}
6: {value: "44", label: "Org 2"}
7: {value: "148", label: "Testing App"}
我有来自查询字符串的值,例如 value="55",如果该值存在,我想在选择框中显示该选定值。
我尝试了 2 种不同的方式,如下所示,
1)
selectedValue='55'
defaultValue={this.organizationOptions().find(op => {
return op.value === selectedValue
})}
2
defaultValue={{value: "55", label: "My Sensor_56"}}
但是没有人工作,有人可以告诉我如果我已经有默认值,我该如何设置默认值,或者如果我没有选择值,则不显示默认值?
解决方案
这里我们在组织选项中找到默认值并将其作为值传递给 Select:
import React from 'react';
import Select from 'react-select';
export default class App extends React.Component {
organizationOptions = () => {
return [
{value: "62", label: "Dfdf"},
{value: "128", label: "Dfdfdsf"},
{value: "151", label: "Fgfdgdfh"},
{value: "121", label: "Hhhfas"},
{value: "55", label: "My Sensor_56"},
{value: "13", label: "New Org"},
{value: "44", label: "Org 2"},
{value: "148", label: "Testing App"}
]
}
render() {
const selectedValue = "55"
return (
<Select
value={this.organizationOptions().find(op => {
return op.value === selectedValue
})}
onChange={this.handleChange}
options={this.organizationOptions()}
/>
);
}
}
推荐阅读
- django - Django Queryset 过滤器在视图中
- google-sheets - Checkable checkbox column in sheets
- python - 向熊猫数据框添加和增加分钟数
- mysql - Is SQL Inner Join the correct approach?
- r - ANOVA 表,每个处理 R 的观察次数不同
- xml-parsing - 如何更新文件中的 XML 字符串?
- python-3.x - 如何使用一键python打开或关闭所有复选按钮
- php - 使用带有 wordpress 的查询“jeditable”来更新表
- bison - `ss` 在哪里设置 flex 输入以来自命令行参数?
- android - 如何进一步测试我的 Gdx-pay 实施?