React表单中Select组件无法提交数据，Input组件正常的解决方法

问题排查与修复步骤 #

1. 替换所有中文引号为英文引号 #

你的代码里所有属性值用的都是中文引号”（比如id="pet”、value="Chika”），这会导致React无法正确解析这些属性，select的onChange事件可能无法正常触发，值也无法被正确捕获。必须把所有中文引号替换成英文双引号"。

2. 统一表单字段名与取值key #

文本输入框的name是nama，但你在handleSubmit里从formData取的是name，这会导致文本框的数据也无法正确映射到提交的model里。需要把输入框的name改成name，或者把取值改成nama，保持字段名完全一致。

3. 确保setFormData的实现正确 #

如果setFormData是父组件传递的状态更新函数，它需要能根据表单元素的name属性来更新对应字段。比如父组件里正确的实现应该是这样：

const [formData, setFormData] = useState({ name: '', pet: '' });

const handleFormDataChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({ ...prev, [name]: value }));
};

这样不管是input还是select，只要name属性正确，就能把值存入formData对应的字段。

4. 可选：给select设置默认值 #

为了避免初始状态下select没有选中值，可以在父组件初始化formData时给pet设默认值，或者在select标签上添加defaultValue：

// 父组件初始化示例
const [formData, setFormData] = useState({ name: '', pet: 'Chika' });

修正后的完整代码示例 #

import { BiPlus } from 'react-icons/bi'
import Success from "./successRequest"
import Bug from "./bugRequest"
import { useQueryClient, useMutation } from "react-query"
import { addRequest, getRequests } from "../../lib/helper"

export default function AddRequestForm({ formData, setFormData }) {
    const queryClient = useQueryClient()
    const addMutation = useMutation(addRequest, {
        onSuccess: () => {
            queryClient.prefetchQuery('requests', getRequests)
        }
    })

    const handleSubmit = (e) => {
        e.preventDefault();
        if (Object.keys(formData).length === 0) return console.log("Don't have Form Data");
        
        const model = {
            name: formData.name,
            pet: formData.pet
        }

        addMutation.mutate(model)
    }

    if (addMutation.isLoading) return <div>Loading!</div>
    if (addMutation.isError) return <Bug message={addMutation.error.message}></Bug>
    if (addMutation.isSuccess) return <Success message="Added Successfully"></Success>

    return(
        <form onSubmit={handleSubmit}>
            <div className="input-type">
                <input type="text" onChange={setFormData} name="name"
                    className="border w-full px-5 py-3 focus:outline-none rounded-md"
                    placeholder="Nama" 
                    value={formData.name || ''}
                />
            </div> 

            <div className="input-type">
                <label htmlFor="pet" className="block text-sm font-medium text-gray-700">
                    My Pet
                </label>
                <select
                    id="pet"
                    name="pet"
                    autoComplete="pet-name"
                    className="border w-full px-5 py-3 focus:outline-none rounded-md"
                    onChange={setFormData}
                    value={formData.pet || ''}
                    >
                    <option value="Chika">Chika</option>
                    <option value="Chiki">Chiki</option>
                    <option value="Chikoo">Chikoo</option>
                </select>
            </div>
            <button type="submit" className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">提交</button>
        </form>
    )
}

额外提醒 #

• 表单必须包裹在<form>标签里，并给提交按钮加上type="submit"，这样handleSubmit才能通过点击按钮或回车触发。
• 受控组件建议加上value绑定，确保表单状态和React状态完全同步，避免出现不受控的异常情况。

内容的提问来源于stack exchange，提问作者bandungeuy