ASP.NET MVC转React页面：如何保存下拉选择数据至提交按钮

AI 小北

2026-8-4

解决方案：保存下拉框选中值并传递给提交按钮事件

关键步骤说明

1. 添加表单状态变量

在组件中新增状态对象，统一存储用户选择的Claim Type、User Dealer Code以及Registration输入值：

const [formData, setFormData] = useState({
  registration: "",
  claimTypeId: "",
  userToDealerCodeId: ""
});

2. 为表单控件添加事件绑定

给Registration输入框添加双向绑定，同步输入值到状态：

<input 
  className="form-control input-sm" 
  id="registration" 
  name="registration" 
  value={formData.registration}
  onChange={(e) => setFormData(prev => ({...prev, registration: e.target.value}))}
  type="text" 
  aria-required="true" 
  title="This field is required."
/>

给Claim Type下拉框添加选中事件，更新对应状态字段：

<select 
  className="form-control dropdown-claims input-xl"
  id="claimtype"
  value={formData.claimTypeId}
  onChange={(e) => setFormData(prev => ({...prev, claimTypeId: e.target.value}))}
>
  <option value="">请选择</option>
  {claimTypes?.data.map((x: ClaimTypes) => (
    <option key={x.claimTypeId} value={x.claimTypeId}>
      {x.title}
    </option>
  ))}
</select>

修复User Dealer Code下拉框的value拼写错误，并添加事件绑定：

<select 
  className="form-control dropdown-claims input-xl"
  id="userdealercode"
  value={formData.userToDealerCodeId}
  onChange={(e) => setFormData(prev => ({...prev, userToDealerCodeId: e.target.value}))}
>
  <option value="">请选择</option>
  {userToDealerCodes?.data.map((x: UserToDealerCodes) => (
    <option key={x.userToDealerCodeId} value={x.userToDealerCodeId}>
      {x.dealerCode}
    </option>
  ))}
</select>

3. 实现提交按钮处理函数

创建handleStartClaim函数，先做必填项验证，再使用保存的formData进行后续操作：

const handleStartClaim = () => {
  // 必填字段验证
  if (!formData.registration || !formData.claimTypeId || !formData.userToDealerCodeId) {
    const errorTextEl = document.getElementById("ErrorMessageText");
    if (errorTextEl) {
      errorTextEl.textContent = "请完成所有必填项";
    }
    return;
  }

  // 这里可调用提交Claim的API，传入formData
  console.log("要提交的Claim数据：", formData);
  // 示例：await SubmitNewClaim(formData);
  // 提交成功后跳转页面
  // navigate('/claim-list');
};

绑定到Start Claim按钮：

<button className="btn btn-primary" id="submitClaim" onClick={handleStartClaim}>Start Claim</button>

4. 修复原代码小问题

修正Back按钮的onClick调用方式：

<a className="btn btn-secondary" onClick={GoBack}>
  <i className="fas fa-arrow-left btn-icon"></i>
  <span>Back</span>
</a>

完整修改后的代码

import { useState, useEffect } from "react";
import { GetClaimTypes, GetUserToDealerCodes } from "../../aPIHandler/claimApiHandler";
import { Claim } from "../../types/claim";
import { ClaimTypes } from "../../types/claimTypes";
import { UserToDealerCodes } from "../../types/userToDealerCodes";
import { DataItems } from "../../types/dataItems";
import { useAppDispatch } from "../../reduxStore/hooks";
import { changeHeaderText, changePageTitle, changePageDetailDescription } from "../../reduxStore/pageDetailsSlice";
import { useNavigate } from "react-router-dom"

const StartClaim = () => {
    const navigate = useNavigate();
    const GoBack = () => navigate(-1);
    
    const dispatch = useAppDispatch();
    dispatch(changePageTitle("Start Claim"));
    dispatch(changeHeaderText("Claims"));
    dispatch(changePageDetailDescription("You can view all your claims on this portal. To make a claim select the \"New Claim\" link below."));
    
    const [claimTypes, setClaimTypes] = useState<DataItems<ClaimTypes>>();
    const [userToDealerCodes, setUserToDealerCodes] = useState<DataItems<UserToDealerCodes>>();
    
    // 保存表单数据的状态
    const [formData, setFormData] = useState({
        registration: "",
        claimTypeId: "",
        userToDealerCodeId: ""
    });

    const GetClaimTypesData = async () => {
        const promise = await GetClaimTypes();
        if (promise?.data != null) {
            setClaimTypes(promise);
        } else if (promise.error > 0) {
            // Todo: Error handler
        }
    };

    const GetUserToDealerCodesData = async () => {
        const promise = await GetUserToDealerCodes();
        if (promise?.data != null) {
            setUserToDealerCodes(promise);
        } else if (promise.error > 0) {
            // Todo: Error handler
        }
    };
    
    // Start Claim按钮点击处理
    const handleStartClaim = () => {
        // 必填字段验证
        if (!formData.registration || !formData.claimTypeId || !formData.userToDealerCodeId) {
            const errorTextEl = document.getElementById("ErrorMessageText");
            if (errorTextEl) {
                errorTextEl.textContent = "请完成所有必填项";
            }
            return;
        }

        // 调用提交API逻辑
        console.log("要提交的Claim数据：", formData);
        // await SubmitNewClaim(formData);
        // navigate('/claim-list');
    };
    
    useEffect(() => {
        GetClaimTypesData();
        GetUserToDealerCodesData();
    }, []);
    
    return (
        <div>
            <div className="container">
                <div className="row claim-search">
                    <div className="col-12">
                        <a className="btn btn-secondary" onClick={GoBack}>
                            <i className="fas fa-arrow-left btn-icon"></i>
                            <span>Back</span>
                        </a>
                    </div>
                </div>
                <div className="row">
                    <div className="col-12 col-md-12 col-xl-12">
                        <span className="claim-section-text">Start Claim</span>
                        <div className="row">
                            <div className="col-12 col-md-4 col-xl-4">
                                <label className="control-label" htmlFor="registration">
                                    <span>Registration</span>
                                    <sup title="Required">*</sup>
                                </label>
                                <input 
                                    className="form-control input-sm" 
                                    id="registration" 
                                    name="registration" 
                                    value={formData.registration}
                                    onChange={(e) => setFormData(prev => ({...prev, registration: e.target.value}))}
                                    type="text" 
                                    aria-required="true" 
                                    title="This field is required."
                                />
                            </div>
                            <div className="col-12 col-md-4 col-xl-4">
                                <label className="control-label" htmlFor="claimtype">
                                    <span>Claim Type</span>
                                    <sup title="Required">*</sup>
                                </label>
                                <br />
                                <select 
                                    className="form-control dropdown-claims input-xl"
                                    id="claimtype"
                                    value={formData.claimTypeId}
                                    onChange={(e) => setFormData(prev => ({...prev, claimTypeId: e.target.value}))}
                                >
                                    <option value="">请选择</option>
                                    {claimTypes?.data.map((x: ClaimTypes) => (
                                        <option key={x.claimTypeId} value={x.claimTypeId}>
                                            {x.title}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div className="col-12 col-md-4 col-xl-4">
                                <label className="control-label" htmlFor="userdealercode">
                                    <span>User Dealer Code</span>
                                    <sup title="Required">*</sup>
                                </label>
                                <br />
                                <select 
                                    className="form-control dropdown-claims input-xl"
                                    id="userdealercode"
                                    value={formData.userToDealerCodeId}
                                    onChange={(e) => setFormData(prev => ({...prev, userToDealerCodeId: e.target.value}))}
                                >
                                    <option value="">请选择</option>
                                    {userToDealerCodes?.data.map((x: UserToDealerCodes) => (
                                        <option key={x.userToDealerCodeId} value={x.userToDealerCodeId}>
                                            {x.dealerCode}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-12 mt-4">
                        <div className="claim-error-message">
                            <span id="ErrorMessage">
                                <i className="fal fa-frown btn-icon" aria-hidden="true"></i>
                                <span className="claim-error-separator">&nbsp;-&nbsp;</span>
                                <span id="ErrorMessageText"></span>
                            </span>&nbsp;
                        </div>
                    </div>
                    <div className="col-12 col-md-12 col-xl-12">
                        <div className="pull-right">
                            <button className="btn btn-secondary" onClick={GoBack}>Cancel</button>
                            <button className="btn btn-primary" id="submitClaim" onClick={handleStartClaim}>Start Claim</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default StartClaim;

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

ASP.NET MVC转React页面：如何保存下拉选择数据至提交按钮

关键步骤说明 #

1. 添加表单状态变量 #

2. 为表单控件添加事件绑定 #

3. 实现提交按钮处理函数 #

4. 修复原代码小问题 #