React+Material UI中如何用单按钮提交输入框和下拉选单数据

核心思路是通过受控组件模式绑定状态，结合FormControl提供的表单上下文（样式、统一校验等），在提交时一次性触发父组件的状态更新。以下是具体实现步骤：

1. 改造自定义组件，支持受控属性 #

确保你的MassInput和UnitOfMeasurement组件支持外部传入value和onChange，这样才能由父组件控制状态：

MassInput.jsx #

import { TextField } from '@mui/material';

const MassInput = ({ value, onChange, ...props }) => {
  return (
    <TextField
      value={value}
      onChange={(e) => onChange(e.target.value)}
      label="Mass Value"
      {...props}
    />
  );
};

export default MassInput;

UnitOfMeasurement.jsx #

import { Autocomplete, TextField } from '@mui/material';

// 假设你的下拉选项结构如下
const unitOptions = [
  { label: '千克(kg)', value: 'kg' },
  { label: '克(g)', value: 'g' },
  { label: '磅(lb)', value: 'lb' },
];

const UnitOfMeasurement = ({ value, onChange, ...props }) => {
  return (
    <Autocomplete
      options={unitOptions}
      getOptionLabel={(option) => option.label}
      // 匹配当前选中项（根据传入的value文本）
      value={unitOptions.find(opt => opt.label === value) || null}
      // onChange回调返回选中项的文本
      onChange={(e, newValue) => onChange(newValue?.label || '')}
      renderInput={(params) => <TextField {...params} label="计量单位" />}
      {...props}
    />
  );
};

export default UnitOfMeasurement;

2. 父组件中实现表单逻辑 #

在父组件（或封装的表单组件）中维护临时表单状态，提交时调用父组件传入的setKey和setUnits更新状态：

表单组件示例 #

import { useState } from 'react';
import { FormControl, FormGroup, Button, Box } from '@mui/material';
import MassInput from './MassInput';
import UnitOfMeasurement from './UnitOfMeasurement';

const SettingsForm = ({ initialKey, initialUnits, setKey, setUnits }) => {
  // 维护表单临时状态，避免输入过程中频繁触发父组件渲染
  const [inputKey, setInputKey] = useState(initialKey);
  const [selectedUnit, setSelectedUnit] = useState(initialUnits);

  const handleSave = () => {
    // 提交时一次性更新父组件状态
    setKey(inputKey);
    setUnits(selectedUnit);
  };

  return (
    <Box component="form" onSubmit={(e) => e.preventDefault()} sx={{ padding: 2 }}>
      <FormControl component="fieldset">
        <FormGroup>
          <MassInput
            value={inputKey}
            onChange={setInputKey}
            sx={{ marginBottom: 2 }}
          />
          <UnitOfMeasurement
            value={selectedUnit}
            onChange={setSelectedUnit}
            sx={{ marginBottom: 2 }}
          />
          <Button variant="contained" onClick={handleSave}>
            Save Settings
          </Button>
        </FormGroup>
      </FormControl>
    </Box>
  );
};

export default SettingsForm;

关键说明 #

• FormControl的作用是提供统一的表单上下文（比如错误提示、标签排版、disabled状态统一等），核心的状态管理还是依赖React的useState和组件的受控绑定。
• 使用临时状态inputKey和selectedUnit是为了优化性能：输入过程中只更新子组件状态，提交时再同步到父组件，避免频繁触发父组件的渲染。
• 如果你的自定义组件原本不支持受控属性，必须先完成改造——这是实现表单状态可控的前提。

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