在React中正确处理和获取Select下拉框的值

// inputs 数组中定义了 select 类型的字段
const inputs = [
    // ... 其他输入字段
    {
      id: 6,
      name: "sex",
      type: "select",
      required: true,
      values: ["男性", "女性"], // 选项值数组
      label: "性別",
    },
    // ...
];

// 渲染 select 元素的部分
<select
  name={input.name}
  id={input.id}
  className="form-select"
  onChange={onChange}
>
  {input.values.map((value) => {
    // 错误示例：optionValue 未定义
    <option value={optionValue} key={value}>
        {value}
    </option>
  })}
</select>

// 假设 input.values 是 ["男性", "女性"]
<select
  name={input.name}
  id={input.id}
  className="form-select"
  onChange={onChange}
>
  {input.values.map((value) => {
    // 正确示例：将迭代得到的 'value' 直接绑定到 option 的 value 属性
    return ( // 注意：如果 map 回调函数体有多行，需要显式使用 return
        <option value={value} key={value}>
            {value}
        </option>
    );
  })}
</select>

const [values, setValues] = useState({
    lastName: "",
    firstName: "",
    lastNameHiragana: "",
    firstNameHiragana: "",
    birthday: "",
    sex: "", // 初始值为空字符串
    telephone: "",
    email: "",
    enterDate: "",
});

const onChange = (e) => {
    // 使用计算属性名来动态更新对应字段的状态
    setValues({ ...values, [e.target.name]: e.target.value });
};

import React, { useState } from 'react';

function MyForm() {
    const [values, setValues] = useState({
        lastName: "",
        firstName: "",
        sex: "", // 确保初始状态有 sex 字段
        email: "",
    });

    const inputs = [
        {
            id: 1,
            name: "lastName",
            type: "text",
            label: "姓",
            required: true,
        },
        {
            id: 2,
            name: "firstName",
            type: "text",
            label: "名",
            required: true,
        },
        {
            id: 3,
            name: "sex",
            type: "select",
            required: true,
            values: ["男性", "女性", "保密"], // 选项列表
            label: "性別",
        },
        {
            id: 4,
            name: "email",
            type: "email",
            label: "邮箱",
            required: true,
        },
    ];

    const onChange = (e) => {
        setValues({ ...values, [e.target.name]: e.target.value });
        console.log(`Updated ${e.target.name}:`, e.target.value); // 调试输出
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Form submitted with values:", values);
        // 在这里可以处理表单提交逻辑，例如发送到API
    };

    return (
        <form onSubmit={handleSubmit}>
            {inputs.map((input) => (
                <div key={input.id} style={{ marginBottom: '15px' }}>
                    <label htmlFor={input.name} style={{ display: 'block', marginBottom: '5px' }}>
                        {input.label}
                    </label>
                    {input.type === "select" ? (
                        <select
                            name={input.name}
                            id={input.id}
                            value={values[input.name]} // 绑定 select 的 value 到 state
                            onChange={onChange}
                            style={{ width: '100%', padding: '8px', border: '1px solid #ccc' }}
                        >
                            {/* 添加一个默认的空选项，或者提示选项 */}
                            <option value="">请选择</option>
                            {input.values.map((optionValue) => (
                                <option value={optionValue} key={optionValue}>
                                    {optionValue}
                                </option>
                            ))}
                        </select>
                    ) : (
                        <input
                            name={input.name}
                            type={input.type}
                            id={input.id}
                            value={values[input.name]} // 绑定 input 的 value 到 state
                            onChange={onChange}
                            required={input.required}
                            style={{ width: '100%', padding: '8px', border: '1px solid #ccc' }}
                        />
                    )}
                </div>
            ))}
            <button type="submit" style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', cursor: 'pointer' }}>
                提交
            </button>
            <pre>当前表单值: {JSON.stringify(values, null, 2)}</pre>
        </form>
    );
}

export default MyForm;