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

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中获取下拉菜单值的受控组件
  2. 在 React 中获取下拉菜单值的不受控制的组件
在 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 处理程序来更新状态。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Dropdown