React 中获取 Select 元素值的方法-js教程-PHP中文网

React 中获取 Select 元素值的方法

DDD

发布： 2025-07-20 20:32:01

原创

273人浏览过

react 中获取 select 元素值的方法

本文旨在帮助开发者理解并解决在 React 应用中获取 <select> 元素值时遇到的问题。我们将通过一个实际案例，详细讲解如何正确地绑定 onChange 事件，以及如何确保从事件对象中获取到选中的值，从而实现表单数据的有效管理。

在 React 中，获取 <select> 元素的值通常涉及到以下几个关键步骤：状态管理、事件处理以及正确地访问事件对象。以下将通过代码示例，详细解释每个步骤。

1. 状态管理

首先，我们需要使用 useState hook 来管理表单的状态。这允许我们追踪 <select> 元素的值，并在其发生变化时更新组件。

import React, { useState } from 'react';

const [values, setValues] = useState({
    lastName: "",
    firstName: "",
    lastNameHiragana: "",
    firstNameHiragana: "",
    birthday: "",
    sex: "",
    telephone: "",
    email: "",
    enterDate: "",
});

登录后复制

在这个例子中，values 对象存储了表单中各个字段的值，setValues 函数用于更新这些值。

2. 事件处理

接下来，我们需要创建一个 onChange 事件处理函数，该函数将在 <select> 元素的值发生变化时被调用。该函数会接收一个事件对象 e，我们可以通过 e.target.name 获取触发事件的元素的 name 属性，并通过 e.target.value 获取选中的值。

const onChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
};

登录后复制

这个 onChange 函数使用展开运算符 (...) 创建 values 对象的一个副本，然后更新与触发事件的元素 name 属性相对应的键的值。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

3. 构建 Select 元素

现在，让我们构建 <select> 元素，并将其与 onChange 事件处理函数绑定。

const inputs = [
     {
      id: 1,
      name: "lastName",
      type: "text",
      label: "姓",
      required: true,
    },

    // {other objects in between},

    {
      id: 6,
      name: "sex",
      type: "select",
      required: true,
      values: ["男性", "女性"],
      label: "性別",
    },

]

// Form makes input fields, according to the input type(defined above)
<form>
    {inputs
    .filter((input) => input.id <= 8)
        .map((input) => (
            <div key={input.id} className="mb-3">
                <label htmlFor={input.name} className="form-label m-0">
                    {input.label}
                </label>
                {input.type === "select" ? (
                    <select
                      name={input.name}
                      id={input.id}
                      className="form-select"
                      onChange={onChange}
                    >
                      {input.values.map((value) => (
                        <option value={value} key={value}>
                            {value}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <input
                      ref={inputs.id}
                      name={input.name}
                      type={input.type}
                      className={`form-control ${styles.input} `}
                      id={input.id}
                      required={input.required}
                      onChange={onChange}
                    />
                  )}
                <span className={`text-danger text-center`}>
                    {errorMessage[input.name]}
                </span>
            </div>
        )
    )}
</form>

登录后复制

关键点在于 <option value={value} key={value}>。这里，value 属性被设置为 optionValue，但是 optionValue 未定义。应该将 value 属性设置为当前迭代的 value。

4. 常见问题和注意事项