迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

在 React 中处理 Select 元素上的 onChange 事件

作者:迹忆客 最近更新:2023/01/28 浏览次数:

在 React 中处理 select 元素上的 onChange 事件:

  1. 在 select 元素上设置 onChange 属性。
  2. 将所选选项的值保存在状态变量中。
  3. 每次用户更改所选选项时,更新状态变量。
import {useState} from 'react';

const App = () => {
  const options = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const [selected, setSelected] = useState(options[0].value);

  const handleChange = event => {
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

在 React 中处理 Select 元素上的 onChange 事件

该示例将所有选项定义在一个数组中,以使我们的 JSX 代码更加简洁,但我们可以手动编写每个选项元素。

如果我们更愿意手动输入选项,请查看文章中的最后一个代码片段。

我们使用 useState 钩子来存储所选选项的值。

我们传递给钩子的参数是初始状态。 在示例中,我们将初始选择的值设置为空字符串,即第一个选项元素的值。

如果我们希望最初选择不同的选项,请将其值传递给 useState 钩子。

我们在 select 元素上设置了 onChange 属性,所以每次它的值改变时,都会调用 handleChange 函数。

const handleChange = event => {
  console.log(event.target.value);
  setSelected(event.target.value);
};

事件对象的 target 属性指的是 select 元素,所以我们可以访问选定的值作为 event.target.value

在我们的 handleChange 函数中,我们只需使用所选选项的值更新状态。

如果我们需要获取与所选选项元素关联的文本,请访问所选选项的标签属性。

const handleChange = event => {
  console.log('Label 👉️', event.target.selectedOptions[0].label);

  console.log(event.target.value);
  setSelected(event.target.value);
};

下面是一个示例,说明如何在不使用 map() 的情况下手动输入 select 元素的选项。

import {useState} from 'react';

const App = () => {
  // 👇️ initial value of empty string (first option)
  const [selected, setSelected] = useState('');

  const handleChange = event => {
    console.log('Label 👉️', event.target.selectedOptions[0].label);
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option value="">--Choose and option--</option>
        <option value="apple">Apple 🍏</option>
        <option value="banana">Banana 🍌</option>
        <option value="kiwi">Kiwi 🥝</option>
      </select>
    </div>
  );
};

export default App;

我们为 select 元素设置一个空字符串的初始值,这将呈现第一个选项。

我们可以通过提供不同的初始值来更改默认选择的选项,例如 apple

确保初始值是 option 元素上 value 属性的可能值之一。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Node.js 与 React JS 的比较

发布时间:2023/03/27 浏览次数:137 分类:Node.js

本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。

在 Vue 中为 onChange 事件添加参数

发布时间:2023/03/24 浏览次数:91 分类:Vue

在 Vue 中,我们经常需要为表单元素添加 onChange 事件来监听用户输入并做出相应的处理。但是有时候我们需要向该事件传递一些参数,以便更好地处理用户输入。本文将介绍如何在 Vu

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间:2023/03/15 浏览次数:198 分类:React

React 中在 map() 中使用条件: 在数组上调用 map() 方法。 使用 if 条件,如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便