如何为 react-select 设置默认值

在使用 react-select 组件时，我们可能需要为它设置默认值，以方便用户选择或减少用户的操作。本文将介绍如何为 react-select 设置默认值。

方式一：通过 defaultValue 属性设置默认值

react-select 提供了 defaultValue 属性，可以用来设置默认值。这个属性接受一个选项对象，用于匹配 options 中的某一项，并将其设为默认值。

示例代码：

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

function MySelect() {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <Select
      options={options}
      defaultValue={options[1]}
      onChange={setSelectedOption}
      value={selectedOption}
    />
  );
}

在上面的示例代码中，我们为 react-select 设置了 defaultValue 属性，将 options 数组中的第二个选项设为默认值，即 Strawberry。选项数组中的每一项都是一个对象，包含 value 和 label 两个属性。value 是选项的值，label 是选项的文本。

方式二：通过 value 属性和 useState 钩子设置默认值

另一种设置 react-select 默认值的方式是通过 value 属性和 useState 钩子来实现。

示例代码：

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

function MySelect() {
  const [selectedOption, setSelectedOption] = useState(options[1]);

  return (
    <Select
      options={options}
      value={selectedOption}
      onChange={setSelectedOption}
    />
  );
}

在上面的示例代码中，我们使用 useState 钩子来初始化 selectedOption 状态，并将 options 数组中的第二个选项设为默认值，即 Strawberry。当用户选择其他选项时，会调用 setSelectedOption 方法更新状态。

小结

通过本文的介绍，我们了解了两种设置 react-select 默认值的方式：通过 defaultValue 属性和通过 value 属性和 useState 钩子。我们可以根据实际需求选择使用哪种方式来为 react-select 设置默认值。