在 React 中设置 Select 元素的默认值

1. 在 React 中使用 defaultValue 属性设置 Select 元素的默认值
2. 在 React 中使用 react-select 库设置 Select 元素的默认值

本文将讨论 React 中的 <select> 和 <option> 元素。我们将探讨如何访问选定的值并设置默认值。

在 React 中使用 defaultValue 属性设置 Select 元素的默认值

React 是一个基于 JavaScript 的 UI 库，用于构建强大的 Web 应用程序。任何动态 Web 应用程序都需要接受用户输入并相应地更新页面。

state 是 React 的核心功能之一，通常用于存储来自用户输入的值并在必要时触发更改。

与 HTML 不同，用户的选择在 selected 属性中指定，React 使用 value 属性代替。这样做是为了保持所有表单和输入元素一致。

React 中的所有受控输入组件都将用户选择的值保持在状态中。 <select> 元素，如果它是受控的，则必须将 value 属性设置为状态中的选定值。

要设置 <select> 元素的默认值，你可以使用 React 中的 defaultValue 属性。让我们看一个示例代码。

export default function Select() {
  const [choice, setChoice] = useState();
  return (
    <div>
      <select
        value={choice}
        defaultValue={"default"}
        onChange={(e) => setChoice(e.target.value)}
      >
        <option value={"default"} disabled>
          Choose an option
        </option>
        <option value={"one"}>One</option>
        <option value={"two"}>Two</option>
        <option value={"three"}>Three</option>
      </select>
      <h1>You selected {choice}</h1>
    </div>
  );
}

这个受控组件使用 <select> 元素上适当命名的 defaultValue 属性设置默认值。

请注意，defaultValue 属性的值应与选项之一的 value 属性相同。

我们使用 onChange 处理程序来更新我们的状态变量的值。你可以在 CodeSandbox 上查看演示。

如果你的 <select> 元素不受控制，你可以不设置 select 元素和每个 options 的 value 属性。你可以使用 onChange 事件处理程序来更新状态。

在 React 中使用 react-select 库设置 Select 元素的默认值

react-select 是一个提供自定义 Select 组件的库，并为你提供自定义其外观、功能等的选项。

要自定义选项，你必须提供带有键值对的对象数组；例如，我们之前示例中的选项如下。

import Select from 'react-select';

export default function select(){
    let options = [{label: "One", value: "one"}, {label: "Two", value: "two"}, {label: "Three", value: "three"}]
    return (
    	<Select options={options}
            defaultValue={{label: "Choose one", value: ""}}></Select>
    )
}

如你所见，react-select 允许我们设置默认值。只能有一个默认值，因此 defaultValue 属性的值应该是具有 value 和 label 属性的单个对象。

从 react-select 包导入的 Select 组件中的所有事件处理和呈现都在后台进行。