在 React 中获取下拉菜单的选定值

1. 在 React 中获取下拉菜单值的受控组件
2. 在 React 中获取下拉菜单值的不受控制的组件

React 是一个流行的 JavaScript 框架，用于构建动态应用程序。要构建功能正常的应用程序，你必须设置响应性，以便你的应用程序响应用户的输入。

它可以是让他们订阅你的电子邮件列表的复选框、选择正确答案的单选按钮、获取他们全名的文本字段或任何其他类型的输入。

本文将讨论下拉菜单，特别是 <select> 和 <option> HTML 元素，如何在 JSX 中使用它们，以及如何从 React 中的下拉菜单中获取值。

在 React 中获取下拉菜单值的受控组件

React state 允许你将用户选择存储为值并在整个应用程序中使用它们。从用户输入中获取值并将其存储在其内部状态中的组件是受控组件。

让我们看一个简单的应用程序，它让用户选择三种水果中的一种，并将用户的选择显示为文本：

export default function App() {
  const [fruit, setFruit] = useState();
  return (
    <div>
      <select id="fruits" value={fruit} 
              onChange={(e) => setFruit(e.target.value)}>
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Pineapple">Pineapple</option>
      </select>
      <h1>Selected Fruit: {fruit}</h1>
    </div>
  );
}

在本例中，我们使用 useState() 挂钩来更新状态变量。

首先，我们必须在 <select> 元素上设置一个事件侦听器并定义一个事件处理程序。在我们的示例中，它接受一个参数 - e（事件的缩写）并调用 setFruit() 函数。

要使用所选值设置状态，我们从事件对象访问 e.target.value 并将其传递给 setFruit() 函数。

最后，为了显示我们的选择，我们将状态变量 fruit 放在大括号之间，以确保 JSX 将其解释为 JavaScript 表达式。

你可以使用 CodeSandbox 上的代码。

在 React 中获取下拉菜单值的不受控制的组件

你可以使用 defaultValue 属性来设置默认值，而不是在组件的 state 中设置 select 元素的初始值。在这种情况下，select JSX 元素看起来像这样：

export default function App() {
  const [fruit, setFruit] = useState();
  return (
    <div>
      <select id="fruits" defaultValue="Select fruit"
              onChange={(e) => setFruit(e.target.value)}>
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Pineapple">Pineapple</option>
      </select>
      <h1>Selected Fruit: {fruit}</h1>
    </div>
  );
}

使用这种方法，你只需更改设置和访问 select 元素的默认值的方式。否则，一切都是一样的：我们使用 onChange 处理程序来更新状态。