React - 如何在 react-select 中设置默认值

Question

React - 如何在 react-select 中设置默认值

6

我在我的应用程序中使用了 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"，如果该值存在，我想在下拉框中显示该选定的值。

我尝试了两种不同的方法，如下所示的代码：

1)

selectedValue='55'
defaultValue={this.organizationOptions().find(op => {
   return op.value === selectedValue
})}

2

defaultValue={{value: "55", label: "My Sensor_56"}}

但是没有人在工作，有人能告诉我如何设置默认值吗？如果已经有默认值，该如何设置？如果没有选择值，则不显示默认值？

- Vishal

你使用的是哪个版本？ - Daniel Lizik

"react-select": "^2.0.0" - Vishal

在您的情况下，“defaultValue”应该仅为“55”，因为它是所选选项。 - Pardeep Dhingra

@PardeepDhingra 我已经尝试过像defaultValue="55"这样的方式，但不起作用。react-select将整个对象作为选项，例如{value: "55", label: "My Sensor_56"}。 - Vishal

@PardeepDhingra 你能给我展示一下你写的代码吗？ - Vishal

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pardeep Dhingra · Accepted Answer

在组织选项中找到默认值并将其作为值传递给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()}
      />
    );
  }
}