React中无法获取下拉选单选中值的问题求助

问题描述 #

作为React新手，在开发公司信息表单时创建了Country下拉选单，但尝试多种方法仍无法获取其选中值。

相关代码片段 #

<Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
        <SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
          <SoftTypography
            component="label"
            variant="caption"
            fontWeight="bold"
            textTransform="capitalize">
            Country
          </SoftTypography>
        </SoftBox>
        <Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
          <MenuItem value="...">country</MenuItem>
          <MenuItem value="10">Hello 10</MenuItem>
          <MenuItem value="11">Hello 11</MenuItem>
          <MenuItem value="12">Hello 12</MenuItem>
        </Select>
      </Grid>

完整代码 #

/**
=========================================================
* Soft UI Dashboard PRO React - v4.0.0
=========================================================

* Product Page: https://material-ui.com/store/items/soft-ui-pro-dashboard/
* Copyright 2022 Creative Tim (https://www.creative-tim.com)

Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

import { useState } from "react";
// prop-type is a library for typechecking of props
import PropTypes from "prop-types";
// @mui material components
import Grid from "@mui/material/Grid";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
// Soft UI Dashboard PRO React components
import Switch from "@mui/material/Switch";
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftInput from "components/SoftInput";
// NewUser page components
import FormField from "layouts/pages/new/new-company/components/FormField";
import { DateTimePicker } from "@material-ui/pickers";
import { distance } from "chroma-js";
function General({ formData }) {
  const [country, setCountry] = useState("...");
  const handleSetCountry = (event) => setCountry(event.target.value);
  const { formField, values, errors, touched } = formData;
  const { comNumber, address1, address2, city, state, postcode, additional, phone, phone1, fax, web } = formField;
  const { comNumber: comNumberV, address1: address1V, address2: address2V, city: cityV, state: stateV, postcode: postcodeV, additional: additionalV, 
    phone: phoneV, phone1: phone1V, fax: faxV, web: webV} = values;
  const [selectedDate, handleDateChange] = useState(new Date());
  const [rememberMe, setRememberMe] = useState(false);

  const handleSetRememberMe = () => setRememberMe(!rememberMe);


  return (
    <SoftBox>
      <SoftTypography variant="h5" fontWeight="bold">
        General 
      </SoftTypography>
      <SoftBox mt={1.625}>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
            <FormField
              type={comNumber.type}
              label={comNumber.label}
              name={comNumber.name}
              value={comNumberV}
              placeholder={comNumber.placeholder}
              error={errors.comNumber && touched.comNumber}
              success={comNumberV.length > 0 && !errors.comNumber}
            />
          </Grid>
          <Grid item xs={12} sm={6}>
            
              <FormField
                type={address1.type}
                label={address1.label}
                name={address1.name}
                value={address1V}
                placeholder={address1.placeholder}
              />
         
          </Grid>
        </Grid>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
          <FormField
                type={address2.type}
                label={address2.label}
                name={address2.name}
                value={address2V}
                placeholder={address2.placeholder}
              /></Grid>
                 <Grid item xs={12} sm={6}>
           <FormField
                type={city.type}
                label={city.label}
                name={city.name}
                value={cityV}
                placeholder={city.placeholder}
              />
            {/* <FormField
              type={city.type}
              label={city.label}
              name={city.name}
              value={cityV}
              placeholder={city.placeholder}
              error={errors.city && touched.city}
              success={cityV.length > 0 && !errors.city}
            /> */}
          </Grid>
          </Grid>
          {/* <Grid item xs={6} sm={3}>
            <SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
              <SoftTypography
                component="label"
                variant="caption"
                fontWeight="bold"
                textTransform="capitalize"
              >
                State
              </SoftTypography>
            </SoftBox>
            <Select input={<SoftInput />} value={state} onChange={handleSetState}>
              <MenuItem value="...">state</MenuItem>
              <MenuItem value="10">Hello 10</MenuItem>
              <MenuItem value="11">Hello 11</MenuItem>
              <MenuItem value="12">Hello 12</MenuItem>
            </Select>
          </Grid>
          <Grid item xs={6} sm={3}>
            <FormField
              type={zip.type}
              label={zip.label}
              name={zip.name}
              value={zipV}
              placeholder={zip.placeholder}
              error={errors.zip && touched.zip}
              success={zipV.length > 0 && !errors.zip}
            />
          </Grid>
        </Grid> */}
         <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
           <FormField
                type={state.type}
                label={state.label}
                name={state.name}
                value={stateV}
                placeholder={state.placeholder}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
           <FormField
                type={postcode.type}
                label={postcode.label}
                name={postcode.name}
                value={postcodeV}
                placeholder={postcode.placeholder}
                error={errors.postcode && touched.postcode}
              success={postcodeV.length > 0 && !errors.postcode}
              />
            </Grid>
            </Grid>
            <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
            <SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
              <SoftTypography
                component="label"
                variant="caption"
                fontWeight="bold"
                textTransform="capitalize">
                Country
              </SoftTypography>
            </SoftBox>
            <Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
              <MenuItem value="...">country</MenuItem>
              <MenuItem value="10">Hello 10</MenuItem>
              <MenuItem value="11">Hello 11</MenuItem>
              <MenuItem value="12">Hello 12</MenuItem>
            </Select>
          </Grid>
          <Grid item xs={12} sm={6}>
           <FormField
                type={additional.type}
                label={additional.label}
                name={additional.name}
                value={additionalV}
                placeholder={additional.placeholder}
              />
            </Grid>
          </Grid>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
            <FormField
                type={phone.type}
                label={phone.label}
                name={phone.name}
                value={phoneV}
                placeholder={phone.placeholder}
                error={errors.phone && touched.phone}
              success={phoneV.length > 0 && !errors.phone}
              />
              </Grid>
              <Grid item xs={12} sm={6}>
            <FormField
                type={phone1.type}
                label={phone1.label}
                name={phone1.name}
                value={phone1V}
                placeholder={phone1.placeholder}
                error={errors.phone1 && touched.phone1}
              success={phone1V.length > 0 && !errors.phone1}
              />
              </Grid>
              </Grid>
              <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
           <FormField
                type={fax.type}
                label={fax.label}
                name={fax.name}
                value={faxV}
                placeholder={fax.placeholder}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
           <FormField
                type={web.type}
                label={web.label}
                name={web.name}
                value={webV}
                placeholder={web.placeholder}
              />
            </Grid>
            </Grid>
            {/* <Grid container spacing={3}>
            <Grid item xs={12} >
            <FormField
                type={distance.type}
                label={distance.label}
                name={distance.name}
                value={distanceV}
                placeholder={distance.placeholder}
              />
              </Grid>
            </Grid>
            <SoftBox display="flex" alignItems="center">
              <Switch checked={rememberMe} onChange={handleSetRememberMe} />
              <SoftTypography
                variant="button"
                fontWeight="regular"
                onClick={handleSetRememberMe}
                sx={{ cursor: "pointer", userSelect: "none" }}
              >
                &nbsp;&nbsp;Company Opted Out From Surveys
              </SoftTypography>
            </SoftBox> */}
      </SoftBox>
    </SoftBox>
  );
}

// typechecking props for Address
General.propTypes = {
  formData: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
};

export default General;

解决方案 #

1. 验证状态更新是否触发 #

先在更新函数中添加日志，确认下拉选单的选择事件是否被捕获：

const handleSetCountry = (event) => {
  console.log("选中值:", event.target.value);
  setCountry(event.target.value);
};

如果控制台能打印出选中值，说明状态更新逻辑正常，问题可能出在后续使用country值的环节；如果没有打印，需要检查Select组件的事件绑定是否正确。

2. 整合表单状态管理 #

当前表单其他字段使用formData中的values统一管理，而Country字段单独使用本地状态，建议将Country字段整合到全局表单状态中：

• 在formField配置中添加Country字段
• 使用formData提供的更新方法（如setValue，取决于你使用的表单库）来更新值
• 将Select的value绑定到values.country，onChange调用表单库的更新方法

示例（假设使用React Hook Form）：

<Select 
  input={<SoftInput />} 
  value={values.country} 
  onChange={(e) => setValue("country", e.target.value)}
>
  {/* MenuItem 保持不变 */}
</Select>

3. 检查自定义输入组件兼容性 #

你使用了SoftInput作为Select的输入组件，需确认该组件是否正确传递value和onChange属性。可以暂时替换为MUI原生Input组件测试：

import Input from "@mui/material/Input";

<Select input={<Input />} value={country} onChange={handleSetCountry}>
  {/* MenuItem 保持不变 */}
</Select>

如果替换后能正常获取值，说明SoftInput需要适配Select组件的使用场景，需查看其源码调整属性传递逻辑。

4. 确保初始值与选项匹配 #

确认useState的初始值"..."与对应MenuItem的value完全一致，避免因值不匹配导致选中状态异常或更新失效。

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