React：MUI表单中Autocomplete组件如何通过FormData获取值？

你当前的MUI表单中，TextField组件可以通过FormData正常获取值，但添加的multiple模式Autocomplete组件无法用data.get('tags')获取值——这是因为Autocomplete并非原生表单控件，本身不支持name属性，内部嵌套的TextField也不会将选中值同步到表单数据中。

以下是保持和TextField一致API体验的解决方案：

方案：通过隐藏Input同步Autocomplete值 #

核心思路是借助一个隐藏的原生input元素，将Autocomplete的选中值同步到这个input中，让FormData可以通过name属性读取它。

修改后的完整代码 #

表单部分（包含Autocomplete和隐藏Input）

import { useState } from 'react';
import { Box, TextField, Autocomplete, CircularProgress } from '@mui/material';

// ...

const [selectedTags, setSelectedTags] = useState([]);

// ...

<Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1}}>
    {/* 原有TextField组件 */}
    <TextField
        margin="normal"
        required
        fullWidth
        id="title"
        label="Titel"
        name="title"
        autoFocus
    />
    <TextField
        margin="normal"
        required
        multiline
        rows={10}
        fullWidth
        label="Inhalt"
        name="content"
        id="content"
        autoComplete="off"
    />

    {/* 改造后的Autocomplete组件 */}
    <Autocomplete
        multiple
        id="tags"
        className={props.className}
        open={open}
        value={selectedTags}
        isOptionEqualToValue={(option, value) => option.name === value.name}
        getOptionLabel={(option) => option.name}
        options={tags}
        onChange={(event, newValue) => setSelectedTags(newValue)}
        renderInput={(params) => (
            <TextField
                {...params}
                label="Tags"
                required
                InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                        <>
                            {loading ? <CircularProgress color="inherit" size={20}/> : null}
                            {params.InputProps.endAdornment}
                        </>
                    ),
                }}
            />
        )}
    />

    {/* 隐藏Input，用于FormData读取值 */}
    <input
        type="hidden"
        name="tags"
        value={JSON.stringify(selectedTags)}
    />
</Box>

提交处理函数

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    
    // 解析隐藏Input中的JSON格式值
    const tags = JSON.parse(data.get('tags') as string) || [];
    
    let newsResponse = await createNews({
        title: data.get('title'),
        content: data.get('content'),
        tags: tags
    });
}

说明 #

1. 用React状态selectedTags管理Autocomplete的选中值，通过onChange事件同步更新状态。
2. 隐藏的input元素设置name="tags"，其value绑定状态值并序列化为JSON字符串（适配多选数组场景）。
3. 在handleSubmit中解析JSON字符串，得到最终的标签数组，即可和title、content一样传递给接口。

这种方式完全复用了你原有的FormData逻辑，保持了组件间一致的API使用体验。

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