React+TypeScript多步表单：如何传递Select组件值到主表单？

我正在开发基于React+TypeScript的多步骤表单应用，每个表单页面为独立组件，字段也拆分为单独组件。提交表单时可获取文本框数据，但无法获取Select组件的值——核心问题在于Select组件自身维护了内部state，同时表单页面也需要通过onChange同步值，两者的状态没有打通。

相关代码片段 #

主表单类型与初始数据 #

type FormData = {
  firstName: string;
  lastName: string;
  state: string;
};

const INITIAL_DATA: FormData = {
  firstName: "",
  lastName: "",
  state: "",
};

表单状态管理Hook #

const [data, setData] = useState(INITIAL_DATA);

function updateFields(fields: Partial<FormData>) {
  setData((prev) => {
    return { ...prev, ...fields };
  });
}

步骤内容渲染逻辑 #

function getStepsContent(step: number) {
    switch (step) {
      case 0:
        return (
          <Personal
            {...data}
            updateFields={updateFields}
          />
        );
      case 1:
        return (
          <Address
            {...data}
            updateFields={updateFields}
          />
        );
      default:
        return (
          <Personal
            {...data}
            updateFields={updateFields}
          />
        );
    }
  }

个人信息页面类型定义 #

type PersonalData = {
  firstName: string;
  lastName: string;
  state: string;
}

type PersonalProps = PersonalData & {
  updateFields: (fields: Partial<PersonalData>) => void
}

表单字段使用示例 #

<StyledTextField 
  label="First Name"  
  name="firstName"
  value={firstName}
  onChange={e => updateFields({firstName: e.target.value})}
/>

<StyledSelect
  label="State"
  placeholder="Select One"
  name="state"
  data={stateOptions} {/* 注：此处应传递下拉选项数组，原代码可能存在笔误 */}
  onChange={e => updateFields({state: e.target.value})}
/>

原StyledSelect组件代码 #

interface IData {
  id: number;
  name: string;
}

interface StyledSelectProps {
  id: string;
  label: string;
  placeholder: string;
  name: string;
  onChange?: (event: SelectChangeEvent) => void;
  data: IData[];
}

export default function StyledSelect({
  id,
  label,
  placeholder,
  name,
  onChange,
  data,
}: StyledSelectProps) {

  const [value, setValue] = useState("");

  const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value);
    console.log(event.target.value);
  };

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel htmlFor={id}>
          {label}
        </InputLabel>

        <Select
          id={id}
          value={value}
          label={id}
          name={name}
          variant="standard"
          defaultValue=""
          renderValue={value !== "" ? undefined : () => placeholder}
          onChange={handleChange}
        >
          {data.map(({ id, name }) => (
            <MenuItem key={id} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

问题分析与解决方案 #

核心问题 #

1. StyledSelect组件内部通过useState维护独立的value状态，与父组件的表单状态完全隔离，导致父组件无法获取组件内部的选中值
2. 组件Props未定义接收外部value的字段，父组件无法将已有表单状态同步到Select组件
3. 组件内部的handleChange仅更新自身state，未调用父组件传递的onChange回调，无法将选中值同步到父表单

修复后的StyledSelect组件 #

将组件改为受控组件，完全依赖外部传递的value和onChange来管理状态：

import { SelectChangeEvent, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import React from 'react';

interface IData {
  id: number;
  name: string;
}

interface StyledSelectProps {
  id: string;
  label: string;
  placeholder: string;
  name: string;
  onChange?: (event: SelectChangeEvent) => void;
  data: IData[];
  value: string; // 新增：接收外部传递的选中值
}

export default function StyledSelect({
  id,
  label,
  placeholder,
  name,
  onChange,
  data,
  value,
}: StyledSelectProps) {

  const handleChange = (event: SelectChangeEvent) => {
    // 调用父组件的onChange，同步选中值到外部表单
    onChange?.(event);
  };

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel htmlFor={id}>
          {label}
        </InputLabel>

        <Select
          id={id}
          value={value} // 使用外部传递的value
          label={id}
          name={name}
          variant="standard"
          renderValue={value !== "" ? undefined : () => placeholder}
          onChange={handleChange}
        >
          {data.map(({ id, name }) => (
            <MenuItem key={id} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

修正后的组件使用方式 #

确保传递value属性，将表单状态中的state值同步到Select组件：

<StyledSelect
  label="State"
  placeholder="Select One"
  name="state"
  data={stateOptions} // 传递下拉选项数组
  value={state} // 传递表单中的state值
  onChange={e => updateFields({state: e.target.value})}
/>

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